Ensure table headers associate with data cells
SkillMediath-has-data-cells is an agent skill for accessibility review of HTML tables. It guides an AI agent to check that every table header element is associated with data cells, so orphaned or empty headers do not confuse users of assistive technology. The skill covers native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills, and a codebase or rendered HTML with tables to review.
Then ask your AI: use the Ensure table headers associate with data cells skill
What your AI can do with it
- Verify that every <th> element is associated with one or more <td> cells
- Detect empty headers that do not describe any data
- Recommend removing unnecessary headers to reduce screen reader noise
- Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate
- Explain why every header must have associated data for an accessible table structure
- Suggest how to verify fixes with browser accessibility tooling or assistive tech
Getting started
- Have an agent that can load skills, and a codebase or rendered HTML with tables to review.
- Add the th-has-data-cells skill to the agent's available skills.
- Ask the agent to review table markup or design-system patterns against the rule.
- For deeper detail, have the agent consult references/rule.md included with the skill.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/th-has-data-cells/SKILL.md and read by ahel’s review.
Orphaned headers without data cells can confuse users of assistive technology and indicate a broken table structure.
Quick Reference
- Every
<th>must be associated with one or more<td>cells - Avoid empty headers that don't describe any data
- Remove unnecessary headers to reduce screen reader noise
Check
Verify that all <th> elements are correctly associated with data cells.
Fix
Remove empty headers or ensure they are correctly mapped to data cells.
Explain
Explain why every header must have associated data to maintain an accessible table structure.
Code Review
Review the rendered markup and interactive states that affect Ensure table headers associate with data cells. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/th-has-data-cells
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- When reviewing rendered HTML, interactive components, or design-system patterns related to ensuring table headers associate with data cells.
- What does the skill check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- How is a broken table fixed?
- Remove empty headers or ensure they are correctly mapped to data cells.
- Where do full implementation details live?
- In references/rule.md, which ships with the skill and includes code examples and framework-specific guidance.
Advanced
- Item type
- skill
- Key
th-has-data-cells- Source
- github.com/thedaviddias/front-end-checklist