Table Notes and Footnotes
- Melissa Chen (Unlicensed)
- David Fourney (Unlicensed)
Where the data or other content in the table requires additional notes, these notes need to be semantically associated with the table.
The tbody element defines the body content of a data table. A table can have more than one tbody. Table notes should appear within a tbody element within the table.
When there are multiple notes, their semantic relationship to the table data and each other should be clear. This is achieved when the following is present:
The notes are presented in a list. While a <ol> or <ul> may fit the context, we recommend using a <dl> (see The Description List element).
Each note reference links to a target note.
When there are multiple tables and multiple notes on the same page, footnotes and table notes must have unique numbers within the same page.
Footnotes that use special characters (especially asterisks):
Change multiple special characters (e.g., **) to numbers (e.g., 2).
Special characters are not valid HTML id values (e.g. use id=”x”, not id=”*”).
The example table below shows the use of table footnotes. For information on the screen-reader-only and visible-on-focus classes used in this example, see the main Knowledge base page.
<table>
<caption>A table with footnotes <sup id="table.fn.1.ref"><a href="#table.fn.1"><span class="screen-reader-only">Footnote </span>(1)</a></sup></caption>
<thead>
<tr>
<th scope="col">Raw Materials Production</th>
<th scope="col">2017</th>
<th scope="col">2018 <sup id="table.fn.p.ref"><a href="#table.fn.p"><span class="screen-reader-only">Footnote </span>(p)</a></sup></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<p>Iron Ore <sup id="table.fn.2.ref"><a href="#table.fn.2"><span class="screen-reader-only">Footnote </span>(2)</a></sup></p>
</th>
<td>
<p>999.99</p>
</td>
<td>
<p>999.99</p>
</td>
</tr>
<tr>
<th scope="row">
<p>Tin <sup><a href="#table.fn.2"><span class="screen-reader-only">Footnote </span>(2)</a></sup>
<sup id="table.fn.3.ref"><a href="#table.fn.3"><span class="screen-reader-only">Footnote </span>(3)</a></sup></p>
</th>
<td>
<p><sup id="table.fn.4.ref"><a href="#table.fn.4"><span class="screen-reader-only">Footnote </span>(4)</a></sup>
999.99</p>
</td>
<td>
<p>-</p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="3">
<h3 id="table.fn">Footnotes</h3>
<dl>
<dt>p</dt>
<dd id="table.fn.p">
<p>Projected year to date.</p>
<p class="visible-on-focus"><a href="#table.fn.p.ref">Return to footnote reference</a>
</p>
<dt>1</dt>
<dd id="table.fn.1">
<p>If the table title really needs a footnote, it might be time to rewrite the title. Perhaps
it is too long and goes on forever.</p>
<p class="visible-on-focus"><a href="#table.fn.1.ref">Return to footnote reference</a>
</p>
</dd>
<dt>2</dt>
<dd id="table.fn.2">
<p>Iron is a chemical element with symbol Fe (from Latin: <span lang="la">ferrum</span>) and
atomic number 26. It is a metal in the first transition series.</p>
<p class="visible-on-focus"><a href="#table.fn.2.ref">Return to footnote reference</a>
</p>
<dt>3</dt>
<dd id="table.fn.3">
<p>Tin bonds readily to iron and is used for coating lead, zinc and steel to prevent corrosion.</p>
<p class="visible-on-focus"><a href="#table.fn.3.ref">Return to footnote reference</a>
</p>
</dd>
<dt>4</dt>
<dd id="table.fn.4">
<p>Sometimes a note needs to appear before the data.</p>
<p class="visible-on-focus"><a href="#table.fn.4.ref">Return to footnote reference</a>
</p>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
For more information on this approach, see WET’s HTML Technical Requirements on Table Notes.