How to Create Zebra Striping On Html Table With CSS3 Selectors

Introduction

Zebra Striping is a coloring on rows in HTML table. It is given to having background colors on each row and column. This technique has been used by many designers when making tables on the web. This allows to style only the odd rows of an HTML table. So get ready to how to use nth-child selector in html tables. Below the complete guide to How to use nth-child (odd) in a table.

The HTML
Copy the below HTML code into your HTML page and give the id themobilehub.

<table id="themobilehub">
<thead>
<tr>
<td></td>
<th>ID</th>
<th>Age</th>
<th>Height</th>
<th>Occupation</th>
<th>Hoby</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<th>Harry </th>
<td>01</td>
<td>22</td>
<td>6′5″</td>
<td>Developer</td>
<td>Cricket</td>
</tr>
<tr>
<th>Whitley</th>
<td>02</td>
<td>22</td>
<td>6′2″</td>
<td>Journalist</td>
<td>Cricket</td>
</tr>
<tr>
<th>Jones</th>
<td>03</td>
<td>22</td>
<td>5′7″</td>
<td>Florist</td>
<td>Cricket</td>
</tr>
<tr>
<th>Edwards</th>
<td>04</td>
<td>18</td>
<td>5′</td>
<td>Candlestick</td>
<td>Cricket</td>
</tr>
<tr>
<th>Sally </th>
<td>05</td>
<td>37</td>
<td>5′8″</td>
<td>Developer</td>
<td>Cricket</td>
</tr>
<tr>
<th>Smythe</th>
<td>06</td>
<td>16</td>
<td>4′11″</td>
<td>Fishmonger</td>
<td>Cricket</td>
</tr>
<tr>
<th>John</th>
<td>07</td>
<td>29</td>
<td>5′10″</td>
<td>Student</td>
<td>Cricket</td>
</tr>
</tbody>
</table> 

The CSS

It is simple CSS for your Zebra Striping tables and choose your zebra Striping background color.

/*------------------------------------*\
 TABLES
\*------------------------------------*/
table{
 margin-bottom:20px;
 width:100%;
}
caption{
 margin-bottom:5px;
}
caption,tfoot{
 font-family:Cambria, Georgia, "Times New Roman", serif;
 font-style:italic;
}
tfoot{
 text-align:center;
}
td,th{
 padding:5px;
 border:1px solid #333;
}
th:empty,
td:empty{
 border:none;
}
th{
 font-weight:bold;
}
#themobilehub tbody tr:nth-of-type(odd){
 background:#666666;
 color:#FFFFFF;
}

Zebra Striping Live Example Demo

	ID	Age	Height	Occupation	Hoby
Harry	01	22	6′5″	Developer	Cricket
Whitley	02	22	6′2″	Journalist	Cricket
Jones	03	22	5′7″	Florist	Cricket
Edwards	04	18	5′	Candlestick	Cricket
Sally	05	37	5′8″	Developer	Cricket
Smythe	06	16	4′11″	Fishmonger	Cricket
John	07	29	5′10″	Student	Cricket