4.1 — Basic Table Elements

Tables are the specialised tool for organising data into rows and columns. They are not for page layout – they are for multidimensional information that must be read along two axes. This section builds the fundamental grid from its four core elements, then adds captions and cell spanning.

The Four Pillars of a Table

Every data table is built from four tightly bound elements:

<table> – the root container that creates the grid formatting context.
<tr> (table row) – defines one horizontal row.
<td> (table data) – a standard cell that holds content.
<th> (table header) – a cell that labels a row or column; it is bold and centred by default, and it carries semantic weight for accessibility.

A minimal table:

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Name	Score
Alice	92
Bob	87

The `<caption>` Element

A <caption> provides a title or description for the entire table. It must be the first child of the <table> element, and only one is allowed per table. Screen readers announce the caption when the user encounters the table.

<table>
  <caption>Monthly Sales</caption>
  …
</table>

Monthly Sales
Product	Units
Widget	120

Cell Spanning: `colspan` and `rowspan`

By default, each cell occupies exactly one grid coordinate. The attributes colspan and rowspan (applied to <td> or <th>) let a cell stretch across multiple columns or rows.

colspan – merges columns horizontally. Example: <td colspan="3"> consumes three adjacent column slots.
rowspan – merges rows vertically. Example: <td rowspan="2"> occupies the current row plus the next row in the same column.

Always ensure the total span count matches the number of available cells in the grid, or the browser will create misaligned columns.

Column Span Example

<table>
  <tr>
    <td colspan="2">Spans two columns</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Spans two columns		C
A	B	C

Row Span Example

<table>
  <tr>
    <td rowspan="2">Spans two rows</td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Data 2</td>
  </tr>
</table>

Spans two rows	Data 1
	Data 2

Figure 4.1: Visualising colspan and rowspan on a grid.

A Complete Blueprint: Quarterly Delivery Report

The following example combines all the elements – caption, headers, data cells, rowspan, colspan – into a real‑world table that tracks delivery metrics.

<table>
  <caption>Quarterly Microprocessor Delivery Metrics</caption>
  <tr>
    <th>Component Model</th>
    <th>Region Code</th>
    <th>Units Dispatched</th>
  </tr>
  <tr>
    <td rowspan="2">Alpha Processing Unit</td>
    <td>US-East</td>
    <td>14,500</td>
  </tr>
  <tr>
    <td>EU-West</td>
    <td>12,200</td>
  </tr>
  <tr>
    <td colspan="2">Total Dispatched Volume</td>
    <td>26,700</td>
  </tr>
</table>

Quarterly Microprocessor Delivery Metrics
Component Model	Region Code	Units Dispatched
Alpha Processing Unit	US-East	14,500
Alpha Processing Unit	EU-West	12,200
Total Dispatched Volume		26,700

The table uses rowspan="2" to let the component name cover two regions, and colspan="2" to make the total label span the first two columns. The result is a clear, accessible data matrix.

TAKEAWAY

Tables are grids of rows and cells. Use <table> as the root, <tr> for rows, <td> for data, and <th> for headers. Add a <caption> first to describe the table. Extend cells with colspan and rowspan – but always verify your arithmetic. These fundamentals give you a rock‑solid foundation for any tabular data presentation.