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