---
title: CSS Table Style
description: "## Table Padding To control the space between the border and the content in a table, use the `padding` property on and elements: ## The padding Property This property adds space between the border and the content in a table. | Firstname…"
url: "https://apprentice.mn/docs/css-table-style-2/"
updated: "2021-05-10"
category: CSS
---

# CSS 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:

## The padding Property

This property adds space between the border and the content in a table.

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

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

## Horizontal Dividers

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

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

     `th, td {
  border-bottom: 1px solid #ddd;
}`

## Hoverable Table

Use the `:hover` selector on <tr> to highlight table rows on mouse over:

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

     `tr:hover {background-color: #f5f5f5;}`

## Striped Tables

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

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

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

## Table Color

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

## Colored Table Header

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

     `th {
  background-color: #4CAF50;
  color: white;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-table-style-2%2F&linkname=CSS%20Table%20Style)[https://www.addtoany.com/share](https://www.addtoany.com/share)