HTML Table Sections: thead, tbody, tfoot and colgroup

Larger tables are easier to style and understand when you group their rows.

index.html

HTML

<style>
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  thead { background: #f8f2ee; }
  tfoot { font-weight: bold; }
</style>
<table>
  <caption>Order summary</caption>
  <thead>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>The Slow Garden</td><td>1</td><td>$14</td></tr>
    <tr><td>River Notes</td><td>2</td><td>$22</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>$36</td></tr>
  </tfoot>
</table>

The sections

Element	Contains
`thead`	The header rows
`tbody`	The main data rows
`tfoot`	Summary rows such as totals

Browsers show tfoot at the bottom, however you write it. Using sections also lets CSS target all body rows at once, and lets printers repeat headers on every page of a long table.

Styling whole columns

colgroup and col let you style a column without adding classes to every cell.

index.html

HTML

<table>
  <colgroup>
    <col>
    <col style="background: #fffbf9;">
  </colgroup>
  ...
</table>

Only a few CSS properties work on columns, such as background and width.

lightbulb

Always use thead and tbody together

Once you add thead, wrap the other rows in tbody. Mixing loose rows and sections is allowed but confusing.