HTML Table Styling
HTML zebra-striped Table
Use CSS to make your tables look better!
If you add a background color on every other table row, you will get a nice zebra-striped effect.
| First Name | Last Name | Age | Savings |
|---|---|---|---|
| Peter | Griffin | 23 | $100 |
| Lois | Griffin | 19 | $150 |
| Joe | Swanson | 28 | $300 |
| Cleveland | Brown | 21 | $250 |
Here we use the CSS tr:nth-child(even)
selector to style every even table row (2, 4, 6, etc.) with a background-color:
Tip: If you use odd instead of
even, the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
Vertical zebra-striped Table
To make a vertical zebra-striped table, style every other column, instead of every other row.
| First Name | Last Name | Age | Savings |
|---|---|---|---|
| Peter | Griffin | 23 | $100 |
| Lois | Griffin | 19 | $150 |
| Joe | Swanson | 28 | $300 |
| Cleveland | Brown | 21 | $250 |
Set the :nth-child(even) for table data elements like this:
Note: Put the :nth-child() selector
on both th and td
elements if you want to have the styling on both headers and regular table
cells.
Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Try it Yourself »
Horizontal Dividers
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Add the border-bottom property to all tr elements to get horizontal dividers:
Hoverable Table
Use the :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 |
