How to create a zebra stripped table with CSS ? - GeeksforGeeks

04 Feb, 2022
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:
Tap into the tr (table row) element is CSS.
Use the nth-child() selector and add background-color of your choice to all odd (or even) table 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.
gabaa406
saurabh1990aror
CSS-Questions
CSS-Selectors
HTML-Questions
HTML-Tags
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML