Every now and then I poke around on the w3.org website eyeballing the HTML / XHTML specs to see if I'm doing things correct. One of the things I've been bumping into was the fact that I needed to group some table rows (<TR>) together, but if you give table rows a :hover effect, it'll only kick off the hover on one row at a time. I  need the group of table rows to hover all at the same time.

So, I went back to the w3 site and read the table spec. One of the things I noticed was the fact that I hadn't really been paying attention to the fact that <table> tags had a <thead>, <tfoot> & <tbody>. Also, from the example given, you can have multiple <tbody>s which would solve my problem of grouping table rows together. I could put the :hover affect on a <tbody> spanning 3 rows and all three rows would trigger :hover as if I moused over 1 row.

Example code:
<style>
table tbody:hover { background-color: pink; }
</style>

<table border="1" cellspacing="0" cellpadding="0">
<tbody>
    <tr><td>Row 1 - Tbody 1</td></tr>
    <tr><td>Row 2 - Tbody 1</td></tr>
    <tr><td>Row 3 - Tbody 1</td></tr>
</tbody>
<tbody>
    <tr><td>Row 1 - Tbody 2</td></tr>
    <tr><td>Row 2 - Tbody 2</td></tr>
    <tr><td>Row 3 - Tbody 2</td></tr>
</tbody>
<tbody>
    <tr><td>Row 1 - Tbody 3</td></tr>
    <tr><td>Row 2 - Tbody 3</td></tr>
    <tr><td>Row 3 - Tbody 3</td></tr>
</tbody>
</table>

And demo:

This is also pretty useful for styling with css and using effects with jQuery.