Introduction
The HTML
Copy the below HTML code into your HTML page and give the id themobilehub.
The CSS
Zebra Striping Live Example Demo
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
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
