Table
Displays structured data in rows and columns with consistent styling and accessible markup.
When to use
- When displaying structured data that benefits from column alignment (comparisons, datasets, logs).
- When users need to scan across rows or compare values between rows.
- When the data has a consistent schema with named columns.
When not to use
- Don't use a table for layout - use CSS grid or flexbox instead.
- For key-value pairs, use a definition list or a two-column grid layout.
- For a single list of items without columns, use a plain list.
Dos and don'ts
Do
- ✓Provide a
captionfor screen readers even if it is visually hidden. - ✓Keep column headers concise and descriptive.
- ✓Right-align numeric columns for easier comparison.
Don't
- ✕Don't use more columns than the viewport can comfortably display.
- ✕Don't mix row types (headers in body, cells in head).
- ✕Don't omit header cells - every data column needs a label.