MEMEPh. ideas that are worth sharing...

HTML Table Styling

Use CSS to make your tables look better.

HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

To style every other table row element, use the :nth-child(even) selector like this:


tr:nth-child(even) {
  background-color: #D6EEEE;

Test it Yourself

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

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:


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);

Test it Yourself


Horizontal Dividers

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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

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


tr {
  border-bottom: 1px solid #ddd;

Test it Yourself