Back to home

HTML Table Styling

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 Points
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

HTML Table - Vertical Zebra Stripes

Striped Table

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

MON TUE WED THU FRI SAT SUN
             
             
             
             

Combine Vertical and Horizontal Zebra Stripes

Striped Table

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

MON TUE WED THU FRI SAT SUN
             
             
             
             

Horizontal Dividers

Bordered Table Dividers

Add the border-bottom property to the tr elements for horizontal dividers:

Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

Hoverable Table

Move the mouse over the table rows to see the effect.

First Name Last Name Points
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250