How to Crte 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 ch 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 rdy 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 into your HTML page and give the id helpersway.

<table id="helpersway">
<thd>
<tr>
<td></td>
<th>ID</th>
<th>Age</th>
<th>Height</th>
<th>Occupation</th>
<th>Hoby</th>
</tr>
</thd>
<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;
}
#helpersway tbody tr:nth-of-type(odd){
background:#666666;
color:#FFFFFF;
}
Zebra Striping Live Example Demo

Helpers Way-Zebra Striping On Html Table 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