CSS Table Style
CSS Table Padding
To control the space between the border 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
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Add the border-bottom property to <th> and <td> for horizontal dividers:
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 Striped Tables
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
For zebra-striped tables, use the
nth-child() selector and add a
background-color to all even (or odd) table rows:
CSS Table Color
The example below specifies the background color and text color of <th> elements:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
