This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

5.3.3 Table Style

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

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

Example 1 - padding

th, td {
  padding: 15px;
  text-align: left;
}

Horizontal Dividers

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

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example 2 - horizontal dividers

th, td {
2px solid black;
}

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 3 - hover

tr:hover {background-color: rgba(174, 233, 61, 0.4);}

Striped Tables

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

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

Example 4 - striped table

tr:nth-child(odd) {background-color: rgba(174, 233, 61, 0.6);}

Table Color

The example below specifies the background color and text color of <th> elements:

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

Example 5 - colors

th {
  background-color: gold;
  color: purple;
}