Horje
How to create HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

 


Full Example of HTML Table - Vertical Zebra Stripes

Set the :nth-child(even) for table data elements like this:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th:nth-child(even),td:nth-child(even) {
  background-color: #D6EEEE;
}
</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 style="width:100%">
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of HTML Table - Vertical Zebra Stripes





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

Single Articles
Full Example of HTML Table - Vertical Zebra StripesHTML Table Styling

Read Full:
HTML Table Styling
Category:
Web Tutorial
Sub Category:
HTML Table Styling
Uploaded by:
Admin
Views:
74


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_zebra_vertical