<!doctype html> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> table { font: 8px Ahem; border-collapse: collapse; } thead, tbody, tfoot { border: 10px solid; } .first { border-color: green; } .second { border-color: blue; } .third { border-color: yellow; } tbody { border-color: orange; } td { width: 50px; height: 50px; } </style> <table> <tbody class="first"> <tr><td>head 1</td></tr> </tbody> <tbody> <tr><td>body 1</td></tr> </tbody> <tbody class="second"> <tr><td>head 2</td></tr> </tbody> <tbody> <tr><td>body 2</td></tr> </tbody> <tbody class="third"> <tr><td>head 3</td></tr> </tbody> <tbody> <tr><td>body 3</td></tr> </tbody> <tbody class="second"> <tr><td>foot 2</td></tr> </tbody> <tbody> <tr><td>body 4</td></tr> </tbody> <tbody class="third"> <tr><td>foot 3</td></tr> </tbody> <tbody class="first"> <tr><td>foot 1</td></tr> </tbody> </table>