Tables
Tables have distinct meanings to search engines as well as assistive technology devices. Using a table properly creates a better user experience for your site visitors, and makes your site more understandable to search engines.
When to use tables
Use tables to display tabular data that can be read left-to-right, row-by-row, one line at a time.
Examples:
- Course schedules
- Contact information
- Accounting data
- Weekly hours
When not to use tables
Never use a table to create a custom page layout or design. For example, do not use a table to create text columns, float an image next to text, or create a grid of images. Not only will this have a negative impact for assistive technology users, it may also impact SEO. Additionally, the table may not scale well for smaller devices, such as mobile phones.
Set up a consultation with OIT if you need assistance laying out content.
Formatting notes
Avoid nesting tables within tables. This can have a detrimental impact on accessibility.
Tables should have a header row (<thead>). This will improve SEO and user experience.
<table>
<thead>
<tr>
<th>Column header</th>
<th>Column header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column contents</td>
<td>Column contents</td>
</tr>
<tr>
<td>Column contents</td>
<td>Column contents</td>
</tr>
<tr>
<td>Column contents</td>
<td>Column contents</td>
</tr>
</tbody>
</table>
Practical examples
Appropriate use of tables
Name | Phone Number |
Email |
Office |
---|---|---|---|
Dr. Alfred Boscke |
214-768-2000 | name@smu.edu | Dallas Hall 501 |
Dr. Carly Dominguez |
214-768-2000 | name@smu.edu | Dallas Hall 502 |
Dr. E.K. Donald |
214-768-2000 | name@smu.edu | Dallas Hall 503 |
Jennifer Gutierrez |
214-768-2000 | name@smu.edu | Dallas Hall 504 |
Inappropriate use of tables
The following table is being used as a design element and does not hold tabular data.This will cause issues with accessibility as well as formatting and display on smaller screens. Instead, another option, such as the Image Grid feature (login required) should be used.
Dallas Hall | Dedman College | Blanton Building |