Odd Even Table in CSS

Using css you can improve the readability of large tables. Learn how to color alternating rows in a few lines of css code without using any server-side code or javascript.

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 comment

  1. Pingback: Alternating Row Colors in jQuery

Have your say