Tables
Data tables for displaying structured information. All tables meet WCAG 2.1 Level AA with proper semantics and keyboard navigation.
Basic Table
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Wilson | bob@example.com | Viewer | Pending |
| Alice Brown | alice@example.com | Editor | Inactive |
Striped Table
| Product | Category | Price | Stock |
|---|---|---|---|
| Widget A | Electronics | $29.99 | 150 |
| Widget B | Electronics | $49.99 | 75 |
| Gadget X | Accessories | $19.99 | 200 |
| Gadget Y | Accessories | $24.99 | 120 |
Table with Hover
| Date | Description | Amount | Type |
|---|---|---|---|
| 2025-01-15 | Payment received | +$1,250.00 | Credit |
| 2025-01-14 | Service fee | -$25.00 | Debit |
| 2025-01-12 | Subscription | -$99.00 | Debit |
| 2025-01-10 | Refund | +$50.00 | Credit |
Compact Table
| ID | Task | Priority | Due |
|---|---|---|---|
| #001 | Update documentation | High | Today |
| #002 | Review pull request | Medium | Tomorrow |
| #003 | Fix bug in auth | High | Today |
| #004 | Add unit tests | Low | Next week |
Accessibility Guidelines
Proper SemanticsUse thead, tbody, th, and td elements correctly.
Header ScopeTable headers have scope="col" or scope="row" attributes.
Keyboard NavigationInteractive elements within cells are keyboard accessible.
Caption/SummaryComplex tables include caption or aria-describedby for context.