Skip to main content

HTML Lists and Tables

Lists organise related items. Tables represent information with meaningful row and column relationships.

Unordered and ordered lists

<ul>
  <li>Team registration</li>
  <li>Match results</li>
  <li>Leaderboard</li>
</ul>

<ol>
  <li>Choose a fictional dataset.</li>
  <li>Validate its headings.</li>
  <li>Import valid rows.</li>
</ol>

Use an ordered list when sequence matters. Do not create visual bullets with hyphens and line breaks.

Description list

<dl>
  <dt>Administrator</dt>
  <dd>Imports and manages fictional tournament data.</dd>
  <dt>User</dt>
  <dd>Views processed results and statistics.</dd>
</dl>

Accessible table

<div class="table-wrap">
<table>
  <caption>Fictional team standings</caption>
  <thead>
    <tr>
      <th scope="col">Team</th>
      <th scope="col">Wins</th>
      <th scope="col">Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Falcons</th>
      <td>4</td>
      <td>12</td>
    </tr>
  </tbody>
</table>
</div>

The caption identifies the table. Header cells and scope communicate relationships to assistive technology.

Do not use tables for page layout. For narrow screens, keep the semantic table and place it inside a horizontally scrollable wrapper.

Check

  • List type matches the content.
  • Table has a caption.
  • Header cells use suitable scope.
  • Values remain understandable without colour.
  • Layout tables are avoided.
  • Screenshots have meaningful alternative text or are marked decorative.
Back to top