CSS Table Styling
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 |
