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  should be used.

Dallas Hall Blanton
Dallas Hall Dedman College Blanton Building