CSS Tables Style

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.


0 Comments

Leave a Reply

Avatar placeholder