# Phase 9 — Tables and Lists Allowed

This gauge covers Chapter 13 after Accessible Forms.

## Learning goal

Choose list and table structures from the relationships in the content, then
make those relationships clear to visual and assistive-technology users.

## Inherited tools

Everything allowed through `../phase8/allowed.md` remains available.

## New HTML

**Description lists**

- `dl`
- `dt`
- `dd`

**Data tables**

- `table`
- `caption`
- `thead`, `tbody`, `tfoot`
- `tr`
- `th`
- `td`

The inherited `ul`, `ol`, and `li` are now studied in depth.

## New attributes

- On `ol`: `start`, `reversed`
- On `li`: `value` when changing an ordered-list number is meaningful
- On `th`: `scope` with `col`, `row`, `colgroup`, or `rowgroup`
- On table cells: `colspan`, `rowspan` for genuinely shared cells
- On a labelled `section` overflow wrapper: `tabindex="0"`, `aria-label`, and
  `aria-describedby` so keyboard users can reach and identify hidden columns

## New CSS

- `border-collapse`
- `caption-side`
- `vertical-align`
- `list-style-position`
- `list-style-type`

## Learning rules

1. Use `ul` when item order does not change the meaning and `ol` when sequence,
   rank, or count matters.
2. Put list items inside `li`; place a nested list inside the `li` that owns it.
3. Use `dl` for term/description, name/value, question/answer, or other directly
   associated groups. Do not use it merely to indent content.
4. Use tables for genuinely tabular data whose rows and columns form
   relationships. Never use a table to arrange a page.
5. Give a data table a concise `caption` that identifies its purpose or subject.
6. Use `th` for headers and `td` for data. Do not use bold data cells as a
   substitute for real headers.
7. On simple tables, add `scope="col"` to column headers and `scope="row"` to
   row headers.
8. Use `thead`, `tbody`, and `tfoot` to group rows by purpose when those groups
   exist; they do not replace header cells.
9. Keep table source order logical. CSS must not make a different visual order
   imply false data relationships.
10. Use `colspan` and `rowspan` only when one cell truly spans related columns
    or rows. Prefer simple tables when possible.
11. On narrow screens, wrap a wide table in an overflow container instead of
    changing its elements to block boxes and destroying the tabular layout.
12. Do not remove list markers unless another visible treatment still makes the
    grouping or sequence clear.

## Not allowed

- Tables used for page layout
- Lists used only to create indentation
- Empty header cells used for spacing
- Complex multi-level table headers without a clear, testable association plan
- CSS that changes table elements to `display: block`
- Positive `tabindex` or visual reordering that conflicts with source order
- JavaScript
- Inline styles
- Any HTML tag, attribute, or CSS property not inherited or listed above

## Pages

- `01-list-structure.html` — unordered, ordered, and correctly nested lists
- `02-description-lists.html` — term/description and name/value relationships
- `03-table-structure.html` — captions, row groups, headers, rows, and data cells
- `04-accessible-table.html` — scoped headers and responsive overflow around a complete table

## Rules to lean on

Rules 2, 54–59, 72–80, 88, 93, 99–101, 111–122, and 123–134.