Horje
How to create HTML Table - Zebra Stripes | HTML Table Styling Code
How to create HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

 


Full Example of HTML Table - Zebra Stripes

To style every other table row element, use the :nth-child(even) selector like this:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

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

<h2>Zebra 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>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of HTML Table - Zebra Stripes



Read Full::
HTML Table Styling Code
Category:
HTML Code
Sub Category:
HTML Table Styling Code
Uploaded:
10 months ago
Uploaded by:
Admin
Views:
1

Related Articles
What is HTML Table Styling HTML Table Styling Code
How to create HTML Table - Zebra Stripes HTML Table Styling Code
How to create HTML Table - Vertical Zebra Stripes HTML Table Styling Code
How to create HTML Table Combine Vertical and Horizontal Zebra Stripes HTML Table Styling Code
How to create HTML Table Horizontal Dividers HTML Table Styling Code
How to create HTML Hoverable Table HTML Table Styling Code

Single Articles
Full Example of HTML Table - Zebra Stripes

Share on: