My Books

Text Processing with JavaScript

Solve complex text validation, extraction, and modification problems efficiently in JavaScript.

Modern Async JavaScript

Delve into async features of JavaScript from ES2020 through ESNext. Start building custom asynchronous iterators and generators, and more for fast, lean code.

JavaScript Brain Teasers

Ready to test your JavaScript skills? Challenge yourself with these brain-teasing puzzles, supercharge your learning journey, and emerge as a JavaScript pro.

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