Table Captions

Definition

When a table features a summary or headline at the top of the table, it is a table caption.

⚠️

Table captions should never be tagged as <th> elements. This is because it is not labeling one or more columns, but rather is providing a label to the entire table. When you see tables that are incorrectly tagging a caption as a <th> element, it must be remediated.

Also note that <caption> elements should never appear in <thead> elements; <thead> is for containing X-axis table headers only.

🧚

Note that it is not required for every PXE table to have an associated caption, but most of them already do in the form of a figcaption, as many of them are contained within figures.

Example

Caption content goes here
Header Cell	Data Cell

<table>
  <caption>
    Caption content goes here
  </caption>
  <tbody>
    <tr>
      <th>Header Cell</th>
      <td>Data Cell</td>
    </tr>
  </tbody>
</table>

Captioning a Table within a Figure

You can also caption a table contained within a <figure> via the <figcaption> element:

Caption content goes here

Header Cell	Data Cell

<figure>
  <figcaption>Caption content goes here</figcaption>
  <table>
    <tbody>
      <tr>
        <th>Header Cell</th>
        <td>Data Cell</td>
      </tr>
    </tbody>
  </table>
</figure>

Remedation Example

QUANTITY
Quality	Unison	Second	Third	Fourth	Tritone	Fifth	Sixth	Seventh	Octave
Minor		1	3				8	10
Major		2	4				9	11
Perfect	0			5		7			12
Aug4/Dim5					6

<table>
  <thead>
    <tr>
      <th colspan="10">QUANTITY</th>
    </tr>
    <tr>
      <th>Quality</th>
      <th>Unison</th>
      <th>Second</th>
      <th>Third</th>
      <th>Fourth</th>
      <th>Tritone</th>
      <th>Fifth</th>
      <th>Sixth</th>
      <th>Seventh</th>
      <th>Octave</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Minor</td>
      <td />
      <td>1</td>
      <td>3</td>
      <td />
      <td />
      <td />
      <td>8</td>
      <td>10</td>
      <td />
    </tr>
    <tr>
      <td>Major</td>
      <td />
      <td>2</td>
      <td>4</td>
      <td />
      <td />
      <td />
      <td>9</td>
      <td>11</td>
      <td />
    </tr>
    <tr>
      <td>Perfect</td>
      <td>0</td>
      <td />
      <td />
      <td>5</td>
      <td />
      <td>7</td>
      <td />
      <td />
      <td>12</td>
    </tr>
    <tr>
      <td>Aug4/Dim5</td>
      <td />
      <td />
      <td />
      <td />
      <td>6</td>
      <td />
      <td />
      <td />
      <td />
    </tr>
  </tbody>
</table>

No Header Spanning Cells