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

Question

When I learned about HTML tables, I wasn't taught about tbody, thead, tfoot, colgroup. When are you supposed to use them? I went to the W3Schools site and I understand how they work, but not when to use or not use them.

Answer 1

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 bottom of the table in order for them to appear last:

<table>
  <caption>High Scores</caption>
  <tr><th>#</th><th>Name</th><th>Score</th></tr>

  <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 -->

  <tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>

And of course, this also makes it arguably less semantic if you care about that sort of thing.

---

¹_{Note that it is required that a <tfoot>, if you use one, be placed before any <tbody> or <tr> elements in previous specifications up to and including HTML 4 and XHTML 1 for it to validate against those doctypes. This is no longer true as of HTML5.}