Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
Example
h.html
table, th, td { border: 1px solid black; }
Output
Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders.
To display a single border for the table, use the border-collapse property.
Example 2
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Output
Note: If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.
In below example we used table alignment,padding,color and height/width.
Example3
<html&t;
<title&t;Creative Mission</title&t;
<head&t; <style type='text/css'&t;
table
{
width:100%;
border:1px solid green;
}
th
{
background-color:green;
color:white;
height:50px;
vertical-align:bottom;
}
td
{
text-align:right;
padding:15px;
}
</style&t;
</head&t;
<body&t;
<table&t;
<tr&t;<th&t;Firstname</th&t;
<th&t;Lastname</th&t;
<th&t;Savings</th&t;</tr&t;
<tr&t;<td&t;Peter</td&t;
<td&t;Griffin</td&t;
<td&t;$100</td&t;</tr&t;
<tr&t;<td&t;Lois</td&t;
<td&t;Griffin</td&t;
<td&t;$150</td&t;</tr&t;
<tr&t;<td&t;Joe</td&t;
<td&t;Swanson</td&t;
<td&t;$300</td&t;</tr&t;
<tr&t;<td&t;Cleveland</td&t;
<td&t;Brown</td&t;
<td&t;$250</td&t;</tr&t;
</table&t;
</body&t;
</html&t;
