When to use tbody, colgroup, thead, etc, in an HTML table?

You use them if you want to supply additional information about your table and organize the content in it. They can also affect the visual rendering of your table in some ways (although this may vary across browsers — for example, support for <colgroup>/<col> is extremely patchy).

For example if you have header rows on the top and bottom you would group them in a <thead> and a <tfoot> respectively, and the data rows in a <tbody>. Browsers will ensure that the <tfoot> is always rendered at the bottom no matter whether you place it before or after any <tbody> or <tr> elements¹ or how much data you have in your table, which is useful if your table potentially has lots of rows:

<table>
  <caption>High Scores</caption>
  <thead>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </thead>
  <tfoot>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </tfoot>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>10000</td></tr>
    <tr><td>2</td><td>Bob</td><td>9000</td></tr>
    <tr><td>3</td><td>Carol</td><td>8500</td></tr>
    <tr><td>4</td><td>Dave</td><td>8000</td></tr>
    <!-- Up to 100 data rows -->
  </tbody>
</table>

Otherwise by default all rows are grouped into a single <tbody> (even if you don't make explicit use of <tbody></tbody> tags within your table). Consequently, if you have header rows at the bottom of the table, you will have to place them at the very b