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
Last Updated :
04 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...