Table visual structure
Clarify table structure with helper markup.
Logical sections of a table
An HTML table splits into logical sections: <thead> holds the header row, <tbody> the main data, and <tfoot> the summary or totals row.
These three sections arrange the table both visually and for accessibility. <tfoot> may technically sit right after <thead>; but the most common place is after <tbody>, at the end of the table. This lesson follows that order.
Visual order
The visual order of a table is: first <caption>, then <colgroup>, then <thead>, <tbody> and finally <tfoot>.
<caption> must always be the first child of the table; otherwise screen readers cannot tie the title to the table. <colgroup> sits after <caption> and before <thead>. This order matches both the HTML standard and what users expect to see.
Exercise Build the ordered visual structure of a table
Set up the visual order of a table. Inside <table> add in this order: a non-empty <caption>, a <colgroup> with at least one <col>, <thead> with <th scope="col">, <tbody> with <td>, and finally <tfoot> with <td>.
Show example solution
<table>
<caption>Quarterly Balance</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Revenue</td>
<td>$1.2M</td>
</tr>
<tr>
<td>Costs</td>
<td>$0.8M</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Balance</td>
<td>$0.4M</td>
</tr>
</tfoot>
</table>Test yourself
-
Where is tfoot most often placed?
- Before caption
- After tbody, at the end of the table
- Outside the table
- Inside colgroup
Show answer
After tbody, at the end of the table — Correct. tfoot usually sits after tbody, at the end of the table.
-
What comes right after caption?
<table> <caption>Order summary</caption> ____> <col> <col> </colgroup> <thead>...</thead> </table>Show answer
<table> <caption>Order summary</caption> <colgroup>> <col> <col> </colgroup> <thead>...</thead> </table> -
Match each item to its place
- caption
- First child
- colgroup
- After caption
- thead
- After colgroup
- tfoot
- At the end