Pro HTML5 and CSS3 Design Patterns

CHAPTER 15 ■ TABLES

Striped Tables

HTML

<h1>Striped Tables</h1>

<table id="t1">

<tr class="r1 odd"> <td class="c1">r1 c1</td> <td class="c2">c2</td>

<td class="c3"> c3</td> <td class="c4">c4</td> </tr>

<tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">c2</td>

<td class="c3"> c3</td> <td class="c4">c4</td> </tr>

<tr class="r3 odd"> <td class="c1">r3 c1</td> <td class="c2">c2</td>

<td class="c3"> c3</td> <td class="c4">c4</td> </tr>

<tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">c2</td>

<td class="c3"> c3</td> <td class="c4">c4</td> </tr>

<tr class="r5 odd"> <td class="c1">r5 c1</td> <td class="c2">c2</td>

<td class="c3"> c3</td> <td class="c4">c4</td> </tr>

</table>

CSS

#ts td { background:white; } /* Background of all cells */

#t1 .odd td { background:palegreen; } /* Alternating Row Background */

#t1 td.c3 { background:darkgreen; color:white; } /* Column Background */

/* Nonessential styles are not shown */