Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.
Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations may be needed using <scope>, <id>, and <headers> attributes.
| Fruit | Contact | State |
|---|---|---|
| Apple | Maria Anders | Arizona |
| Banana | Francisco Chang | Montana |
| Orange | Roland Mendel | Florida |
| Peach | Helen Bennett | Washington |
| Nectarine | Yoshi Tannamuri | New Mexico |
| Avacodo | Giovanni Rovelli | Colorado |
TIP: If you want tables with alternating rows, you can click on the Advanced tab and enter “usa-table usa-table--striped” under Stylesheet Classes. For just the basic table add "usa-table" to the Stylesheet Classes field. The Web Team can help with these easy to apply styles that will ensure look-and-feel consistency across the site.
| Fruit | Contact | State |
|---|---|---|
| Apple | Maria Anders | Arizona |
| Banana | Francisco Chang | Montana |
| Orange | Roland Mendel | Florida |
| Peach | Helen Bennett | Washington |
| Nectarine | Yoshi Tannamuri | New Mexico |
| Avacodo | Giovanni Rovelli | Colorado |
Creating Accessible Tables
Visit BIA's page on creating accessible tables
