CSS Table Styling
Share
CSS Table Padding
To add some more space between the inner borders and the content in a table, use the
padding property on
<td> and <th> elements:
| First Name |
Last Name |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
CSS Horizontal Dividers
To create horizontal dividers for a table, add the border-bottom property to <th> and <td>
elements:
| First Name |
Last Name |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
CSS Hoverable Table
Use the CSS :hover selector on <tr> to highlight table rows on mouse
over:
| First Name |
Last Name |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
CSS Zebra-striped Table
For zebra-striped tables, use the
nth-child() selector and add a
background-color to all even (or odd) table rows:
| First Name |
Last Name |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
CSS Table Color
The example below specifies a background color and a text color for the <th> elements:
| First Name |
Last Name |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
