Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  3. Table
  5. Accessibility
  7. Semantic Html

Table

Semantic HTML

Accessible tables ensure all users can understand and navigate tabular data effectively. When using Table, follow these best practices.

Table uses proper semantic HTML structure for accessibility.

Table Structure

Proper table structure is announced to screen readers.

  • Uses native <table>, <thead>, <tbody>, <tr>, <th>, <td> elements
  • Screen readers announce table structure
  • Column headers are associated with data cells
  • Table context is clear to assistive technologies

Column Headers

Column headers provide semantic meaning.

  • Column headers use <th> elements
  • Headers are announced when navigating cells
  • Screen readers associate headers with data cells
  • Header text describes column content

Row Headers

Row headers identify row content.

  • Row headers use <th> elements with scope="row"
  • Screen readers announce row identifiers
  • Helps users understand row context
  • Especially important for wide tables

Previous

Accessibility / General

Next

Accessibility / Screen Reader Support

On this page

Table Structure
Column Headers
Row Headers