Login
  • HTML
  • Table Styling

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:

Example

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

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

HTML Table - Vertical Zebra Stripes

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

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

Set the :nth-child(even) for table data elements like this:

Example

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

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

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:

Example

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

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

Example

tr:hover {background-color: #D6EEEE;}

Try Fauna for free

 
Fauna provides serverless, multi-region, transactional database instances that are accessible via a cloud API. Fauna gives you the data safety and reliability that developers need, without the typical database management operational pain. It is 100% ACID compliant and offers innovative capabilities such as data temporality, streaming, multi-tenancy, and built-in support for GraphSQL. In addition, Fauna offers web-native secure access, combining attribute-based access control with SSL and 3rd party auth.

Get started on Fauna instantly with flexible pricing per-use

 
Sign-up for free The data API for modern applications is here. Sign-up for free without a credit card and get started instantly. Sign-up now
Quick start guide Try our quick start guide to get up and running with your first Fauna database, in only 5 minutes! Read more
Database as a Service (DBaaS) vs. Data APIs - Explained
Login
ADS CODE