Friday, April 15, 2011

Table Borders Css

When a table is defined by a tag with no styles specified, a borderless table as wide and as tall as its enclosed data is displayed. From this simple beginning you can structure and style a table to take on virtually any display characteristics you can imagine. table border property is used to set a stylish border for the table in a webpage.

Any border styles that were introduced earlier can be applied to the external border of a table This will results in.
e.g:
<style type="text/css">
table { border: solid 5px #0000FF}
td {border:outset 2px}
</style>

<table width="241">
  <tr>
    <td width="114">Cell 1.1</td>
    <td width="107">Cell 1.2</td>
  </tr>
  <tr>
    <td>Cell 1.3</td>
    <td>Cell 1.4</td>
  </tr>
</table>

 This will results in

Cell 1.1 Cell 1.2
Cell 1.3 Cell 1.4

The border style is described in below for each table. The stylesheet uses the standard format {border: size or style} for all border crossings stylings.

Dashed

Dotted
Double

Thursday, December 2, 2010

Opacity in CSS

Today we learn of opacity in CSS! I made an example here

Information opacity in CSS:
property has a value of opacity of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below the item shows through. 1.0 is 100% opaque - nothing below element will show through.
So, to set an element of transparency of 50%, you may write: opacity: 0.5;

Neither IE 6 or 7 supports CSS 3 opacity property. But you're out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (fully transparent) to 100 (fully opaque). So, for your transparency in IE, you must multiply your opacity by 100 and add an alpha filter to your style:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

Example:
Open notepad type below code
<html>
<title>Opacity in CSS</title>
<head>
<style type="text/css">
body
{
background-image: url("http://travelvacationguides.co.cc/opacity_in_css.jpg");
background-repeat: no-repeat;
font-size: 18px;
}
div
{
width: 200px;
opacity: 0.70;
height: 500px;
margin-left: 5em;
background-color: black;

}
p { padding-top: 20px;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div><p>Learn how to make <a href="http://w3schoolss.blogspot.com/" style="color:#FFFFFF;">opacity in css</a>. this example shows opacity in css in html.</p>
</div>
</body>
</html>


In this example, I create an html page with CSS easy. I put a background image and a div with the background color black. So I make the div opacity to 70%!

This results in:
Opacity in CSS