HTMLintermediate 8 min
Show data in rows and columns with table, tr, th and td.
How to build a table with headings, rows and cells, and how to join cells together.
Timetables, price lists, scores and comparisons are all data that belongs in rows and columns. A proper table lets screen readers announce "column: Price, row: Notebook", which a pile of divs cannot do.
A table is built from a few tags that nest inside each other:
<table>: the whole table.<tr>: one table row.<th>: a header cell (bold and centred by default).<td>: a normal data cell.For longer tables, group rows with <thead> (the heading row), <tbody> (the main rows) and <tfoot> (totals). A <caption> gives the table a title.
Cells can stretch: colspan="2" makes a cell span two columns, and rowspan="2" spans two rows.
<caption> titles the table: "Weekly shopping".<thead> row holds three <th> header cells: Item, Qty, Price.<tbody> has three <td> cells, one per column. Notebook 2 80 and Pen 5 50.<tfoot>, the first cell has colspan="2", so "Total" stretches across the Item and Qty columns, leaving the last cell for 130.border and cellpadding attributes are only there to make the grid visible. In real pages you style tables with CSS.Add a third row for "Eraser, 1, 10" and update the total to 140.
colspan.<td> for headings. Use <th> so assistive tools can tell headings from data.<table> or <tr>. Only table tags belong there.table, tr, th, td build a table; thead, tbody, tfoot and caption organise it.colspan and rowspan merge cells.Next: forms, how pages collect information.
<table border="1" cellpadding="6">
<caption>Weekly shopping</caption>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>2</td>
<td>80</td>
</tr>
<tr>
<td>Pen</td>
<td>5</td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>130</td>
</tr>
</tfoot>
</table>