# 2.7 Tables

## Screen Reader Interaction

{% hint style="info" %}
Screen readers read column and row headers to provide the listener with information on the tables' content and structure. 
{% endhint %}

## Solutions

* Use tables for data that fits well into rows and columns.
* Do not use tables for formatting pages, links, or other information. 
* Always use table headers to describe the contents of the table columns.
* The table headers should clearly communicate the data below them.
* Avoid spanned rows as screen readers may not properly parse them.

### Example

Here is an example default 3x2 table with a header created within LibGuide's rich text editor. It's key you identify which row or column is the table header.

| **State** | **State Capital** |
| --------- | ----------------- |
| Ohio      | Columbus          |
| Indiana   | Indianapolis      |
| Kentucky  | Frankfort         |

<figure><img src="http://s3.amazonaws.com/libapps/accounts/3908/images/lg-tableheader.png" alt="Screenshot of table properties menu in LibGuides."><figcaption><p>Identify which row or column acts as the headers with the table properties tool</p></figcaption></figure>

Source: [Boston College LibGuides Accessibility Guide](http://libguides.bc.edu/guidestandards/accessibility)

## Video tutorial

{% embed url="<https://www.youtube.com/watch?v=_PWI-4McgcE>" %}
Do you need to use a data table on your web page? If so, learn how to appropriately format table content to ensure everyone can understand your data.
{% endembed %}

## Read more...

* [Table Best Practices](http://webaim.org/techniques/tables/): A WebAIM tutorial