Example 1: The Blank Slate

Back to Row Locking with CSS and JavaScript

Below is a simple table of top grossing movies in different categories.

Client-side javascript is used to stripe every other row by adding a class of 'odd' to every other <tr> tag within the <tbody> tag.

Category Movie Gross
Domestic Titanic $600,788,188
Adjusted for Inflation Gone with the Wind $1,329,453,600
Worldwide Titanic $1,845,034,000
R-Rating The Passion of the Christ $370,274,604
PG-13 Rating Titanic $600,788,188
PG-Rating Star Wars $460,998,007
G-Rating Finding Nemo $339,714,978
NC-17 Rating Showgirls $20,350,754
Movies that never hit #1 My Big Fat Greek Wedding 241,438,208
IMAX Everest $87,178,599

For sake of demonstration, and to make it easy for you to view source for everything, both CSS and JavaScript are in the head of this document. In real-world implementation, it is best practice to use external files for each when possible.