Table
The table component displays structured data in rows and columns with responsive behavior and accessibility features. Use tables to present comparative information, data sets, program details, or any content where relationships between data points need to be clearly understood. The component includes responsive scrolling, proper semantic markup, and styling options for different data densities.
Do
- Use clear, descriptive column headers that accurately describe the data in each column.
- Organize data logically with the most important information in the leftmost columns for better scannability.
- Include responsive wrapper with
responsive-tableclass to enable horizontal scrolling on smaller screens. - Provide proper ARIA labels for scrollable tables to inform users about interaction capabilities.
- Use consistent data formatting within columns to maintain readability and comparison accuracy.
- Consider table density by choosing appropriate sizing (standard vs small) based on content volume.
- Test keyboard navigation to ensure all table content is accessible without a mouse.
- Keep row content scannable by avoiding overly long text that makes comparison difficult.
Don’t
- Don’t use tables for layout purposes — tables should only contain tabular data with clear relationships.
- Don’t make column headers too generic — avoid vague headers like “Details” or “Information” without context.
- Don’t ignore mobile experience — always test how tables display and scroll on smaller screens.
- Don’t overcrowd tables with too many columns — consider breaking complex data into multiple focused tables.
- Don’t forget table captions when tables need additional context or explanation for screen readers.
- Don’t use inconsistent data formats within columns — maintain uniform formatting for dates, numbers, and text.
- Don’t make tables too dense without considering readability — use appropriate spacing and sizing.
- Don’t omit responsive behavior — tables wider than viewport need horizontal scrolling capabilities.
Standard Table
Basic responsive table displaying program information with clear column headers and organized data. Demonstrates standard table styling with proper semantic markup and responsive scrolling wrapper. Use this pattern for most data presentation needs.
| Program Name | Eligibility Criteria | Benefit |
|---|---|---|
| Child Care Fee Reduction | Low to moderate-income families | Up to 50% reduction on childcare fees |
| Subsidized Child Care | Families with working parents or students | Subsidized hourly rates or fixed amount discounts |
| Tax Credits / Child Care Credit | Employed parents or guardians | Tax credits that offset childcare expenses |
| Sliding Scale Fee Assistance | Families based on income and family size | Reduced fees on a sliding income scale |
| Universal Child Care Benefit | All families with children under a certain age | Monthly benefit payment towards childcare costs |
Wide Table
Extended table with additional columns showing comprehensive program details. Demonstrates how tables handle wider content with horizontal scrolling and proper column width management. Use this pattern when you need to display more detailed information across multiple data points.
| Program Name | Eligibility Criteria | Benefit | Notes | Application Process |
|---|---|---|---|---|
| Child Care Fee Reduction | Low to moderate-income families | Up to 50% reduction on childcare fees | Income thresholds apply; may vary by region | Submit application to local childcare office or government website |
| Subsidized Child Care | Families with working parents or students | Subsidized hourly rates or fixed amount discounts | Requires application and proof of eligibility | Apply through childcare providers or government subsidy programs |
| Tax Credits / Child Care Credit | Employed parents or guardians | Tax credits that offset childcare expenses | Filed with annual tax returns | Claim via tax filing forms or online tax services |
| Sliding Scale Fee Assistance | Families based on income and family size | Reduced fees on a sliding income scale | Assessed by local childcare office | Contact local childcare office for application details |
| Universal Child Care Benefit | All families with children under a certain age | Monthly benefit payment towards childcare costs | May be income-tested or universal, depending on program | Usually automatic or requires registration with government agency |
Compact Table
Dense table layout with smaller text and reduced padding for information-heavy displays. Shows the table-sm and fs-sm classes for compact data presentation. Use this pattern when you need to fit more information in limited space while maintaining readability.
| Program Name | Eligibility Criteria | Benefit | Notes | Application Process |
|---|---|---|---|---|
| Child Care Fee Reduction | Low to moderate-income families | Up to 50% reduction on childcare fees | Income thresholds apply; may vary by region | Submit application to local childcare office or government website |
| Subsidized Child Care | Families with working parents or students | Subsidized hourly rates or fixed amount discounts | Requires application and proof of eligibility | Apply through childcare providers or government subsidy programs |
| Tax Credits / Child Care Credit | Employed parents or guardians | Tax credits that offset childcare expenses | Filed with annual tax returns | Claim via tax filing forms or online tax services |
| Sliding Scale Fee Assistance | Families based on income and family size | Reduced fees on a sliding income scale | Assessed by local childcare office | Contact local childcare office for application details |
| Universal Child Care Benefit | All families with children under a certain age | Monthly benefit payment towards childcare costs | May be income-tested or universal, depending on program | Usually automatic or requires registration with government agency |
Accessibility Best Practices
Screen Reader Support
- Semantic table structure: Uses proper
<table>,<thead>,<tbody>,<th>, and<td>elements for clear data relationships. - Descriptive column headers: Each column has clear, specific headers that describe the data content.
- Table captions: When needed, tables include captions to provide additional context about the data.
- Scrollable table labeling: Responsive table wrappers include
aria-labelto inform users about scrolling capabilities.
Keyboard Navigation
- Full keyboard access: All table content is accessible via Tab key navigation and arrow keys for cell-by-cell movement.
- Logical tab order: Navigation follows natural reading order from left to right, top to bottom.
- Scrollable area access: Users can access horizontal scrolling via keyboard when tables exceed viewport width.
- Focus indicators: Clear visual focus states help users identify their current position within table data.
Visual Accessibility
- High contrast ratios: All table text, headers, and borders meet WCAG AA contrast requirements.
- Clear column separation: Visual borders and spacing help users track data across rows and columns.
- Responsive behavior: Tables maintain readability and functionality across all screen sizes and zoom levels.
- Consistent alignment: Data alignment within columns supports easy scanning and comparison.
Content Guidelines
- Specific column headers: Use descriptive headers that clearly identify the type of data in each column.
- Consistent data formatting: Maintain uniform formatting for similar data types (dates, currency, percentages).
- Scannable content: Keep cell content concise while providing necessary detail.
- Logical data organization: Arrange columns in order of importance or logical relationship.
Implementation Considerations
- Responsive design: Always wrap tables in
responsive-tablecontainers for mobile compatibility. - Performance: Consider pagination or filtering for very large data sets to maintain page performance.
- Data sorting: Plan for sortable columns when users need to reorganize data.
- Export functionality: Consider providing data export options for tables with extensive information.
ARIA Attributes in Use
aria-label="Scrollable table"— Identifies responsive table containers that can be scrolled horizontally.scope="col"— Applied to column headers to identify their relationship to data cells.scope="row"— Applied to row headers when tables include row-based categorization.aria-describedby— Connects tables to additional descriptive content when needed.