CONCEPT OF EVEN AND ODD RULE USED IN A ROW-
Readability of rows in a large table is hard to read and understand but it can be easily verified by using even odd concept.
FOR EXAMPLE
Following Table have 7 row and 6 columns. The number of even row have different color and the odd one have another color this will be easily recognized by user and the data can be easily verified.
using following code will help you verify the concept of even odd rows and columns too...
<table>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Age</th>
<th>Gender</th>
<th>Phone Number</th>
<th>Place</th>
</tr>
<tr>
<td>Neha</td>
<td>1-08-1990</td>
<td>25</td>
<td>Female</td>
<td>9876777093</td>
<td>India</td>
</tr>
<tr>
<td>Himanshu</td>
<td>16-08-1991</td>
<td>24</td>
<td>Male</td>
<td>9997807654</td>
<td>Dehradun</td>
</tr>
<tr>
<td>Himanshi</td>
<td>18-08-1994</td>
<td>22</td>
<td>female</td>
<td>992795643</td>
<td>dehli</td>
</tr>
<tr>
<td>Himanshi</td>
<td>18-08-1994</td>
<td>22</td>
<td>female</td>
<td>992795643</td>
<td>dehli</td>
</tr>
<tr>
<td>Himanshi</td>
<td>18-08-1994</td>
<td>22</td>
<td>female</td>
<td>992795643</td>
<td>dehli</td>
</tr>
<tr>
<td>Himanshi</td>
<td>18-08-1994</td>
<td>22</td>
<td>female</td>
<td>992795643</td>
<td>dehli</td>
</tr>
<tr>
<td>Himanshi</td>
<td>18-08-1994</td>
<td>22</td>
<td>female</td>
<td>992795643</td>
<td>dehli</td>
</tr>
</table>
CSS:-
table {
border: 5px solid #FFF;
width: 100%;
}
table tr th{
text-align: left;
background: #555;
}
table tr th, table tr td {
height:20px;
}
table tr:nth-child(odd) { background:#8ED02F; }
table tr:nth-child(even) { background:#B50462; }
0 Comment(s)