Odd Even Table in CSS

Even and odd table rows improve the readability of large tables. By using CSS you can easily color alternating rows. For instance, the following table has been given a pale blue background for the even rows and dark blue for the odd ones.

<table>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
<tr><td>row5</td></tr>
</table>

CSS:

 tr:nth-child(odd) {background: #150095} /* selects every odd row */
 tr:nth-child(even) {background: #a293ff} /* selects every even row */

You can also create Odd and Even Rows for lists and other elements.

1 Comments

Leave a Reply