tables

# Tables Accessibility Skill > **Canonical source**: `examples/TABLES_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when creating or reviewing HTML data tables. **Only load this skill if the project contains data tables.** --- ## Core Mandate Use tables for information whose meaning depends on relationships between rows and columns. Mark those relationships in HTML so users can identify the table, navigate its cells, and hear the relevant headers with each value. The complexity of the markup should match the complexity of the information — simplifying or splitting a table is often better than adding increasingly complicated header associations. **Never use tables for layout.** Use CSS Grid/Flexbox instead. Do not turn a reading-oriented data table into an application-style grid (`role="grid"`) unless users genuinely need spreadsheet-like keyboard interaction. --- ## Severity Scale (this skill) | Level | Meaning | |---|---| | **Critical** | Table data is completely uninterpretable by screen reader users | | **Serious** | Headers missing or misassociated; complex table with no navigation aid | | **Moderate** | No name for the table when multiple tables share a page; zebra stripes lost in forced-colours without fallback | | **Minor** | `<thead>`/`<tbody>` absent; obsolete `summary` attribute used | --- ## Choose the Correct Structure First * A **li...