InHouse Inclusive

Tables That Make Sense – Organizing Data for All Users

Written by

inhouseinclusive

in

Publication Date: 10/19/2024

Tables can be your best friend or your worst enemy when it comes to accessibility. When done right, they organize complex information clearly for everyone. When done wrong, they create confusion for screen reader users and frustration for people trying to understand your data. The difference lies in proper structure and thoughtful headers.

When to Use Tables (And When Not To)

Use tables for:

  • Comparing data across categories
  • Showing relationships between items
  • Displaying structured information like schedules, prices, or statistics

Don’t use tables for:

  • Page layout (use CSS instead)
  • Simple lists (use actual lists)
  • Side-by-side content that’s not related data

The Foundation: Proper Table Structure

Every accessible table needs:

  1. Table headers (<th> elements)
  2. Clear relationships between headers and data
  3. A descriptive caption when helpful

Basic Table Anatomy

<table>
  <caption>Fall 2024 Course Schedule</caption>
  <thead>
    <tr>
      <th>Course</th>
      <th>Time</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Biology 101</td>
      <td>9:00 AM</td>
      <td>Science Hall 204</td>
    </tr>
  </tbody>
</table>

Writing Effective Table Headers

Be specific and descriptive:

  • Instead of “Name” → “Student Name” or “Course Name”
  • Instead of “Date” → “Registration Deadline” or “Event Date”
  • Instead of “Info” → “Contact Information”

Example: Tuition Table

Bad Headers: Type | Cost
Good Headers: Degree Program | Annual Tuition

Complex Tables: When You Need More Structure

Some tables have headers that span multiple columns or rows. Here’s how to handle them:

Column Groups Example:

           Fall Semester    Spring Semester
Course     Credits  Cost    Credits  Cost
Math 101   3        $450    3        $450
Eng 102    4        $600    4        $600

For complex tables, use scope attributes:

  • scope="col" for column headers
  • scope="row" for row headers
  • scope="colgroup" for headers spanning multiple columns

Table Captions: When and How

Use captions when:

  • The table’s purpose isn’t obvious from surrounding content
  • You have multiple tables on a page
  • The table contains complex information

Caption Examples:

  • “Student Enrollment by Major, Fall 2024”
  • “Comparison of Meal Plan Options and Prices”
  • “Library Hours During Finals Week”

Common Table Mistakes

1. Using Tables for Layout

<!-- DON'T DO THIS -->
<table>
  <tr>
    <td>Navigation menu</td>
    <td>Main content</td>
    <td>Sidebar</td>
  </tr>
</table>

2. Missing Headers Every column and row of data should relate to a clear header.

3. Merged Cells Without Proper Markup If you merge cells, use colspan and rowspan attributes correctly.

4. Empty Header Cells Don’t leave <th> elements empty – they confuse screen readers.

Styling Tables for Readability

Visual techniques that help everyone:

  • Alternate row colors (zebra striping)
  • Clear borders or spacing between cells
  • Adequate padding within cells
  • Responsive design for mobile viewing

CSS Example:

table {
  border-collapse: collapse;
  width: 100%;
}
 
th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
 
tr:nth-child(even) {
  background-color: #f9f9f9;
}

Mobile-Friendly Tables

Large tables don’t work well on small screens. Consider:

Option 1: Horizontal Scrolling Allow the table to scroll horizontally while keeping headers visible.

Option 2: Responsive Transformation Convert table rows into card-like layouts on mobile.

Option 3: Priority Columns Show only the most important columns on mobile, with an option to view all data.

Testing Your Tables

Screen Reader Test: Navigate your table using only keyboard. Can you understand the relationships between headers and data?

The Explanation Test: Can you explain what each cell represents without looking at the visual layout?

Mobile Test: View your table on a phone. Is it still usable?

Real-World Examples

Good: University Tuition Table

Degree Level    | In-State Tuition | Out-of-State Tuition
Undergraduate   | $12,000          | $28,000
Graduate        | $15,000          | $32,000

Good: Event Schedule

Time     | Event                    | Location
9:00 AM  | Registration Opens       | Main Lobby
10:00 AM | Welcome Session          | Auditorium A
11:30 AM | Breakout Sessions        | Various Rooms

Content Management Tips

For WordPress/CMS users:

  • Use your CMS’s table editor properly
  • Don’t skip the “header row” option
  • Add table captions through your editor’s advanced options

For Manual HTML:

  • Always include <thead>, <tbody>, and proper <th> elements
  • Test with a screen reader or accessibility checker
  • Validate your HTML for proper table structure

Quick Fixes for Existing Tables

  1. Add missing headers – Convert the first row/column to <th> elements
  2. Include table captions for complex tables
  3. Check mobile display – ensure tables work on small screens
  4. Improve visual design – add borders, spacing, and contrast

Content Editor Action Items

  • [ ] Audit your five most recent posts with tables
  • [ ] Ensure all tables have proper headers
  • [ ] Add captions where helpful
  • [ ] Test table readability on mobile devices
  • [ ] Document table standards for your team

Remember: Tables are powerful tools for presenting structured information, but they require careful attention to accessibility. When you build tables thoughtfully, you make complex data understandable for everyone – and that’s when tables truly shine.

Comments

Leave a comment

More posts