Skip to content
Related Articles

Related Articles

Improve Article

How to create a zebra stripped table with CSS ?

  • Difficulty Level : Medium
  • Last Updated : 10 Aug, 2021

A zebra-stripped table is a table that has alternating rows (or columns) in a different shade of color. The benefits of using zebra-stripped tables are many, such as increasing the readability of rows (or columns), laying emphasis on a specific set of rows (or columns), etc.

This article will tell you how to create a zebra-stripped table (rows or columns) in a webpage by using HTML and CSS only.

Table with Zebra Stripped rows:

Example: Alternate rows get a different background color, thus creating a table with zebra-stripped rows.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Zebra-Stripped Table</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }
 
        tr:nth-child(odd) {
            background-color: #8F9AA5;
        }
    </style>
</head>
 
<body>
    <table>
        <tr>
            <td>Model</td>
            <td>Make</td>
            <td>Year</td>
            <td>Transmission Type</td>
        </tr>
        <tr>
            <td>Urus</td>
            <td>Lamborghini</td>
            <td>2017</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Cayenne Turbo</td>
            <td>Porsche</td>
            <td>2018</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Durango SRT</td>
            <td>Dodge</td>
            <td>2018</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Juke Nismo RS</td>
            <td>Nissan</td>
            <td>2014</td>
            <td>Manual</td>
        </tr>
        <tr>
            <td>Escalade ESV</td>
            <td>Cadillac</td>
            <td>2012</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Levante S</td>
            <td>Maserati</td>
            <td>2017</td>
            <td>Automatic</td>
        </tr>
    </table>
</body>
 
</html>

Output:



Table with Zebra Stripped columns:

  • Tap into the td (table data) element in CSS.
  • Use the nth-child() selector and add a background-color of your choice to all odd (or even) table data cells.

Example: Alternate cells get a different background color, which makes the color of alternating columns different, thus creating a table with zebra-stripped columns.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Zebra-Stripped Table</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }
 
        td:nth-child(odd) {
            background-color: #8F9AA5;
        }
    </style>
</head>
 
<body>
    <table>
        <tr>
            <td>Model</td>
            <td>Make</td>
            <td>Year</td>
            <td>Transmission Type</td>
        </tr>
        <tr>
            <td>Urus</td>
            <td>Lamborghini</td>
            <td>2017</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Cayenne Turbo</td>
            <td>Porsche</td>
            <td>2018</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Durango SRT</td>
            <td>Dodge</td>
            <td>2018</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Juke Nismo RS</td>
            <td>Nissan</td>
            <td>2014</td>
            <td>Manual</td>
        </tr>
        <tr>
            <td>Escalade ESV</td>
            <td>Cadillac</td>
            <td>2012</td>
            <td>Automatic</td>
        </tr>
        <tr>
            <td>Levante S</td>
            <td>Maserati</td>
            <td>2017</td>
            <td>Automatic</td>
        </tr>
    </table>
</body>
 
</html>
</html>

Output

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :