Tables

Tables

Tables arrange data in rows and columns, like a spreadsheet on your page.

The basic table

• <table>: the whole table
• <tr>: one row
• <th>: a header cell (bold, at the top)
• <td>: a normal cell

<table>
  <tr>
    <th>Fruit</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>

Table parts

For big tables, organize them in groups:

• <caption>: the table's title (goes right after <table>).
• <thead>: the header rows.
• <tbody>: the main body rows.
• <tfoot>: the footer rows (like a total).

<table>
  <caption>Weekly sales</caption>
  <thead>
    <tr>
      <th>Day</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mon</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>500</td>
    </tr>
  </tfoot>
</table>

Columns: <colgroup> and <col>

• <colgroup>: groups columns.
• <col>: represents one column, so you can style the whole column at once.

<table>
  <colgroup>
    <col class="name-col">
    <col class="score-col">
  </colgroup>
  ...
</table>

Spanning: colspan and rowspan

• colspan="2": a cell stretches across 2 columns.
• rowspan="2": a cell stretches across 2 rows.

<tr>
  <td colspan="2">This spans two columns!</td>
</tr>

scope for accessibility

On header cells, add scope="col" or scope="row" so screen readers know what each header points to.

<th scope="col">Fruit</th>
<th scope="row">Apple</th>

TL;DR

• <table>, <tr>, <th>, <td> = table, row, header cell, data cell.
• <caption>, <thead>, <tbody>, <tfoot> organize the table.
• <colgroup>/<col> style whole columns.
• colspan/rowspan stretch cells.
• scope helps screen readers.