table

Description

The <table> element is the container for all tabular data. It establishes a two-dimensional grid where data is organized into rows (<tr>) containing cells (<th> and <td>).

Vanilla Breeze styles tables with full-width layout, collapsed borders, and tabular numeral font features by default. Tables automatically include hover states on rows for improved readability.

When to Use

• Data comparison: When users need to compare values across rows or columns
• Structured data: For data with clear relationships between headers and values
• Reports and statistics: Financial data, analytics, inventory lists
• Schedules and timetables: When time slots relate to activities or resources

When Not to Use

• Layout purposes: Use CSS Grid or Flexbox instead. Consider <layout-grid> for card layouts.
• Simple lists: Use <ul> or <ol> for non-tabular data
• Key-value pairs: Use <dl> for definition lists

Basic Example

A properly structured table includes <caption> for accessibility, <thead> for headers, and <tbody> for data rows.

Variants

.striped

Alternating row colors improve readability for tables with many rows.

.compact

Reduced padding for dense data displays where space is limited.

.bordered

Full borders on all cells, useful for complex data or when cells need clear separation.

Combined Variants

Variants can be combined for specific use cases.

Numeric Data Alignment

Use the data-numeric attribute on <th> and <td> elements to right-align numeric content and enable tabular numerals for proper alignment of digits.

Responsive Patterns

Tables can be challenging on small screens. Here are recommended patterns:

Horizontal Scroll

Wrap tables in a container with overflow-x: auto to allow horizontal scrolling on narrow viewports.

Layout Alternative

For non-tabular data that might look like a table, consider using <layout-grid> which provides responsive card layouts that adapt better to different screen sizes.

Accessibility

• Always include a <caption>: Provides context for screen reader users navigating to the table
• Use <th> with scope: Define whether headers apply to columns (scope="col") or rows (scope="row")
• Structure with <thead>, <tbody>, <tfoot>: Helps assistive technologies understand table structure
• Avoid empty cells: Use appropriate content or "N/A" rather than leaving cells empty
• Keep tables simple: Avoid complex merged cells when possible

Screen Reader Announcement

Screen readers announce table structure, including the caption, number of rows and columns, and header associations. A well-structured table helps users navigate efficiently.

Variants Summary

Related Elements

• <caption> - Table title for accessibility
• <colgroup> and <col> - Column grouping and styling
• <thead> - Header row group
• <tbody> - Body row group
• <tfoot> - Footer row group
• <tr> - Table row
• <th> - Header cell
• <td> - Data cell

Layout Alternatives

• <layout-grid> - For card-based layouts that adapt to screen size