Complete data table — caption, thead, tbody, colspan

A proper data table with caption, header, body, footer, and cells that span multiple columns.

index.html v3.1

<table>
  <caption>Model Benchmark Results — Q3 2024</caption>
  <thead>
    <tr>
      <th rowspan="2">Model</th>
      <th colspan="2">Accuracy</th>
      <th colspan="2">Latency (ms)</th>
      <th rowspan="2">Status</th>
    </tr>
    <tr>
      <th>Train</th>
      <th>Test</th>
      <th>Train</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RandomForest</td>
      <td>0.982</td>
      <td>0.942</td>
      <td>120</td>
      <td>12</td>
      <td><span class="badge success">Trained</span></td>
    </tr>
    <tr>
      <td>XGBoost</td>
      <td>0.991</td>
      <td>0.951</td>
      <td>85</td>
      <td>8</td>
      <td><span class="badge success">Trained</span></td>
    </tr>
    <tr>
      <td>NeuralNet</td>
      <td>0.978</td>
      <td>0.938</td>
      <td>2400</td>
      <td>45</td>
      <td><span class="badge fail">Failed</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Average</strong></td>
      <td><strong>0.984</strong></td>
      <td><strong>0.944</strong></td>
      <td><strong>868</strong></td>
      <td><strong>22</strong></td>
      <td>—</td>
    </tr>
  </tfoot>
</table>

Live preview updates as you type

🧠 How it works

caption — the table's title. Appears above the table. Important for accessibility. thead — header rows. Can have MULTIPLE rows (like here: one for groups, one for sub-columns). tbody — the actual data rows. tfoot — footer rows (totals, averages). Appears at the bottom. rowspan='2' — this cell spans 2 rows (the Model header covers both header rows). colspan='2' — this cell spans 2 columns (Accuracy header covers Train + Test columns). Use colspan/rowspan for grouped headers — common in benchmark tables. th — header cell (bold, centered by default). td — data cell (normal). Always use <thead> / <tbody> — CSS targets them separately (e.g. .data-table thead).

✏️ Try these changes

Add a new <tr> in tbody with a new model
→ table grows by one row
Change rowspan="2" to rowspan="1" on the Model header
→ header structure breaks — Model only covers first row
Add a new column: add a <th> in thead and a <td> in each tbody row
→ table gets wider
Remove the <caption>
→ table loses its title
Add a 'colgroup' to set column widths: <colgroup><col style="width:200px"><col><col></colgroup>
→ first column becomes fixed width

← Previous lab

Complete form — all input types + validation

Next lab →

Article/blog page — complete content layout