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

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