# Table

Tables show tabular data in columns and rows.

The React <code>Table</code> component will eventually be deprecated in favor of 
  <a href="/patterns/html-table">HTML-based patterns</a>.

## Guidance

### When to use

- When you need tabular information, such as statistical data.
- When users need to compare sets of information.

### When to consider alternatives

- Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.
- If you're writing out name / value pairs, there's often a more compact way compared to using a table.

### Usage

- Right-align numerical data in tables. You can use the `align` prop on the TableCell to accomplish this. Right alignment makes it easier to scan and compare numerical values.

### Accessibility

- Tables can have two levels of headers. Each header cell should have `scope="col"` or `scope="row"`. [Learn more about the "scope" attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope)
- Complex tables are tables with more than two levels of headers. Each header should be given a unique `id` and each data cell should have a `headers` attribute with each related header cell’s `id` listed.
- When adding a title to a table, include it in a `<caption>` tag inside of the `<table>` element.

## Learn more

- [W3C Web Accessibility Tutorial \- Table Concepts](https://www.w3.org/WAI/tutorials/tables/)
- [Design Better Data Tables](https://medium.com/mission-log/design-better-data-tables-430a30a00d8c)