# HTML Lists and Tables

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

## Unordered and ordered lists

~~~html
<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

~~~html
<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

~~~html
<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.