` tag. However, you can also add the `summary` attribute to a table to further clarify its use. The `summary` attribute is specifically designed to explain a table to a vision-impaired user. If a table has both a summary and a caption, the summary should not simply restate the caption.
The W3C offers [this example](http://www.w3.org/TR/WCAG20-TECHS/H73.html) for a table detailing a bus schedule:
```html
State & First |
State & Sixth |
State & Fifteenth |
Fifteenth & Morrison |
4:00 |
4:05 |
4:11 |
4:19 |
```
### Building complex tables
Most accessibility groups recommend keeping tables simple if accessibility is a concern. A complex table could potentially be split into multiple, smaller tables instead of being kept together. That being said, when creating a complex table, there are a few things to keep in mind.
Always use `` to define the headers for columns and rows. If a header cell is not a ` | `, but a ` | `, use the `scope` attribute to explain what kind of heading the cell is:
- `scope="row"` means the cell is a header for the row it's inside.
- `scope="column"` means the cell is a header for the column it's inside.
```html
Most Expensive Sandwiches by City
Rank |
City |
Price |
1 |
2 |
3 |
Campbell, CA |
New York, NY |
Sandwich, IL |
$12.99 |
$9.99 |
$8.99 |
```
If a cell has multiple headers, use the `headers` attribute on the cell to define them. Give each header a unique ID, and then write the ID of each header in the `headers` attribute of the cell. Separate multiple headers with a space.
```html
Cute Animals Per 1,000 People
State |
Dogs |
Cats |
Rabbits |
California |
3 |
1 |
10 |
```
***
## Customize with Sass
Tables can be easily customized using our Sass variables.
{{> examples_tables_variables}}
**Note:** `rem-calc();` is a function we wrote to convert `px` to `rem`. It is included in **_functions.scss**.
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
{{#markdown}}
```scss
@import "foundation/components/tables";
```
{{/markdown}}
|