CSS Tables Style

In this article, you will learn-

1 CSS Tables Style
2 Table Padding
3 The padding Property
4 Horizontal Dividers
5 Bordered Table Dividers
6 Hoverable Table
7 Hoverable Table
8 Striped Tables
9 Striped Table
10 Table Color

Table Padding

CSS Tables Style: 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
Sohail	Khan	$100
Haroon	Khan	$150
Asad	Khan	$300
Jawad	Khan	$250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>The padding Property</h2>
<p>This property adds space between the border and the content in a table.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Horizontal Dividers

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

Bordered Table Dividers

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

Firstname	Lastname	Savings
Sohail	Khan	$100
Haroon	Khan	$150
Asad	Khan	$300
Jawad	Khan	$250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Hoverable Table

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

Hoverable Table

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

First Name	Last Name	Points
Sohail	Khan	$100
Haroon	Khan	$150
Asad	Khan	$300
Jawad	Kahn	$250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: yellow;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Kahn</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Striped Tables

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

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
Sohail	Khan	$100
Haroon	Khan	$150
Asad	Khan	$300
Jawad	Kahn	$250

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
  <tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
  </tr>
  <tr>
  <td>Sohail</td>
  <td>Khan</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Haroon</td>
  <td>Khan</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Asad</td>
  <td>Khan</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Jawad</td>
  <td>Kahn</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

Table Color

The example beneath determines the background color and text color of <th> elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

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

th {
  background-color: #04AA6D;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>Khan</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Asad</td>
    <td>Khan</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Jawad</td>
    <td>Khan</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.