Type your HTML here: (scripts and custom event handlers are not allowed) <table cellpadding="0" cellspacing="0" border="1" summary="This table has two columns, listing each album and its year of production or release; albums are further organised into two groups of rows, showing demo tapes first and studio albums second"> <thead> <tr> <th>Album</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Raging Wrath of the Easter Bunny</td> <td>1986</td> </tr> <tr> <td>Bowel of Chiley</td> <td>1987</td> </tr> <tr> <td>Goddammit I Love America</td> <td>1988</td> </tr> <tr> <td>OU818</td> <td>1989</td> </tr> </tbody> <tbody> <tr> <td>Mr. Bungle</td> <td>1991</td> </tr> <tr> <td>Disco Volante</td> <td>1995</td> </tr> <tr> <td>California</td> <td>1999</td> </tr> </tbody> </table>

Type any CSS you want here: (any properties allowed except expression, behavior and @import) /* here's counter-reset in action */ table { counter-reset:group; } tbody { counter-increment:group; counter-reset:row; } tbody tr { counter-increment:row; } tbody td:first-child:before { content:counter(group, upper-latin) "." counter(row) " - "; } /* this is to make the demo look pretty */ td, th { font-family:sans-serif; text-align:left; padding:2px 5px; }

Show me!