CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
Example:
<html>
<head>
<style type='text/css'>
table,th,td
{
border:2px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Subba</td>
<td>Raju</td>
</tr>
<tr>
<td>Thomus</td>
<td>Affee</td>
</tr>
</table>
</body>
</html>
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
Example:
<html>
<head>
<style type='text/css'>
table
{
border-collapse:collapse;
}
table,th,td
{
border:2px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Subba</td>
<td>Raju</td>
</tr>
<tr>
<td>Thomus</td>
<td>Affee</td>
</tr>
</table>
</body>
</html>
Table Width and Height
Width and height of a table is defined by the width and height properties.
Example:
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
td
{
text-align:right;
}
Table Padding
To control the space between the border and content in a table, use the padding property on td and th elements:
Example
td
{
padding:15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
.