How to create a zebra stripped table with CSS ?
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
Please Login to comment...