HTML Table Styling

Use CSS to make your tables look better.

10 11 12 13 14 15 16 17 18 19 20 To style every other table row element, use the

selector like this:

Example tr:nth-child(even) {

(odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.

To make vertical zebra stripes, style every other column, instead of every other row.

10 11 12 13 14 15 16 17 18 19 20

Example td:nth-child(even), th:nth-child(even) {

selector on both th and td elements if you want to have the styling on both headers and regular table cells.

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.

color to specify the transparency of the color:

Example tr:nth-child(even) {

$100

$150

$300 If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

:hover selector on tr to highlight table rows on mouse over: