Summary row
Add a totals/summary row inside tfoot.
Summary row: tfoot
tfoot carries the table's summary row: a total, average, or overall result. It comes after tbody, right before </table>. The label cell is a th scope="row" (e.g. "Total"); the value cells are td. In this lesson we'll add a row with the total units and revenue across the four months.
Using th in the totals row
The first cell of the totals row is a label ("Total", "Average"). So using th is the right call; adding scope="row" keeps it consistent. The value cells are td because they hold real data. This split is correct both visually and semantically: a screen reader says "Total, 1,450 units".
Exercise Add tfoot and the totals row
Take the table from the previous lesson. After </tbody> open a <tfoot>. Add one <tr> inside. The first cell is th scope="row" with content Total, then three td: the first td holds — (no product name), the second td 1,450, the third td $145,000.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monthly Sales Report</title>
</head>
<body>
<table>
<caption>Monthly Sales Report — 2026</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Product</th>
<th scope="col">Units</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Jan</th>
<td>Headphones</td>
<td>320</td>
<td>$32,000</td>
</tr>
<tr>
<th scope="row">Feb</th>
<td>Stylus</td>
<td>280</td>
<td>$28,000</td>
</tr>
<tr>
<th scope="row">Mar</th>
<td>Keyboard</td>
<td>410</td>
<td>$41,000</td>
</tr>
<tr>
<th scope="row">Apr</th>
<td>Mouse</td>
<td>440</td>
<td>$44,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>—</td>
<td>1,450</td>
<td>$145,000</td>
</tr>
</tfoot>
</table>
</body>
</html>Test yourself
-
Where does tfoot go in the table structure?
- Before caption
- Right after caption, before thead
- After tbody, before </table>
- Inside the head element
Show answer
After tbody, before </table> — Correct. tfoot comes after tbody and before the table's closing tag.
-
Complete the tfoot opening tag
<____> <tr> <th scope="row">Total</th> </tr> </tfoot>Show answer
<tfoot> <tr> <th scope="row">Total</th> </tr> </tfoot> -
Match each table section to its role
- thead
- Column headers
- tbody
- Data rows
- tfoot
- Totals row
- caption
- Table title