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

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

No comments:

Post a Comment