HTML - Tables (Overview)

Overview

Estimated time: 30–45 minutes

Tables are for tabular data (not layout). Structure them for accessibility and clarity.

Learning Objectives

• Use caption, thead/tbody/tfoot, and th/td.
• Apply scope to identify headers.
• Use colspan/rowspan safely.

Basic table

<table>
  <caption>Quarterly Revenue</caption>
  <thead>
    <tr><th>Quarter</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>$10k</td></tr>
    <tr><th scope="row">Q2</th><td>$12k</td></tr>
  </tbody>
</table>

Colspan/Rowspan

<td colspan="2">Total</td>

Accessibility

• Use <caption> to describe the table's purpose.
• Apply scope on <th> to define headers.

Exercises

1. Build a 3x3 table with row headers and a caption.
2. Merge the last row cells to show a total with colspan.