Display tabular data in HTML using table, thead, tbody, th, td, colspan, and rowspan. Always add a caption for accessibility.
Why <thead>/<tbody>/<tfoot>: they give the table structure that browsers and screen readers use — screen readers associate column headers with their data cells. When to use a table: only for genuinely tabular data. Never use tables for page layout.
scope — On <th> — declares whether the header applies to a "col" (column), "row", "colgroup", or "rowgroup". Essential for screen readers to map headers to data cells.headers — On <td> — a space-separated list of <th> ids this cell belongs to. Use for complex tables where scope alone is not enough.<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>28</td>
<td>London</td>
</tr>
<tr>
<td>Bob</td>
<td>34</td>
<td>Paris</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">2 records found</td>
</tr>
</tfoot>
</table>When colspan: a header that spans multiple columns — "Full Name" spanning First and Last. When rowspan: a value that applies to multiple rows — a merged score cell. Why omit the covered cells: the rowspanned cell already occupies those slots; adding extra cells breaks the table layout.
colspan — On <td> or <th> — merges the cell across N columns horizontally. The value is the number of columns to span.rowspan — On <td> or <th> — merges the cell across N rows vertically. Omit the covered cells in subsequent rows.<table>
<tr>
<th colspan="2">Full Name</th> <!-- spans 2 columns -->
<th>Score</th>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td rowspan="2">100</td> <!-- spans 2 rows -->
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<!-- 3rd cell omitted — covered by rowspan above -->
</tr>
</table>Why: screen readers announce the caption before reading the table, so users know what data they are about to hear. Where: it must be the very first child of <table>. It is visible on screen by default, so it doubles as a heading for sighted users too.
<table>
<caption>Monthly Sales Report — Q1 2025</caption>
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr><td>January</td><td>$12,000</td></tr>
<tr><td>February</td><td>$15,400</td></tr>
<tr><td>March</td><td>$11,200</td></tr>
</tbody>
</table>