incorrect-data-table
Rule Severity : Moderate
Description
The <table>
element should only be used for representing tabular data, not for layout purposes. Incorrect use of tables for layout can confuse users of screen readers and other assistive technologies.
The incorrect-data-table
rule aligns with WCAG Success Criterion 1.3.1 (Info and Relationships), which requires that information, structure, and relationships conveyed through presentation must be programmatically determinable.
Examples
In the following example, a <table>
is incorrectly used for layout rather than tabular data.
In the following corrected example, semantic HTML and CSS are used for layout:
How to fix?
To fix violations of the incorrect-data-table
rule, follow these steps:
- Identify <table> elements used purely for layout.
- Replace them with semantic HTML elements (
<div>
,<header>
,<main>
, etc.) and CSS for layout. - Reserve
<table>
only for presenting tabular data with clear row and column relationships.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!