Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb
student smiling at a computer

Accessibility series: Creating tables

An accessible table is an effective table. With a few tips, you can master the art of creating an accessible table.

February 16, 2018 by Alyson Epperson

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Welcome to our series of posts called, “How to make your website accessible.” We have discussed the ethical and legal reasoning behind accessibility, how to write alternative text, checking color contrast, how to write descriptive links, how to create accessible headings, and limitations on using color to convey content. The accessibility journey continues with the discussion of accessible tables.

Accessible tables are important

The purpose of data tables is to present information in a grid or matrix. Columns and rows are intended to show the meaning of the information within the grid. Users without visual impairments can visually scan a table and make associations between data in the table and their row and/or column.

Users with visual impairments cannot make visual associations. Those using screen readers have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells. Tables without structural markup to differentiate proper header and data cells create accessibility barriers.

Correct HTML markup not only helps those using assistive devices consume content more accurately, but it also improves the functionality that adapts the table layout on mobile devices. This functionality is intended to increase data comprehension and help users avoid zooming and side-scrolling on mobile devices.

What information goes into a table?

Before moving forward, we must talk about the purpose of a table. Tables are used for tabular data, making the HTML markup important to understand. Tabular data requires an ordered arrangement of rows and columns that rely on headers to group information. Tables should not be used for layout or to position elements on your web page.

Back to the basics

Let’s take a stroll through memory lane and recall the layout of rows and columns. Columns run up and down, whereas rows run right to left. As we continue, the importance of rows and columns will be addressed when organizing information in an accessible manner.

As we move forward, we will learn how to add the <thead>,<tbody> and headers.

graphic explaining the layout for columns and rows

Table markup

The <thead> element is used to group header content, the <tbody> element is used to group the body content and the <tfoot> element is used to group footer content. Every table must have a <thead> and <tbody> element for the mobile table styles to be applied.

The purpose of these elements are to specify the parts of a table. Browsers can scroll the body of a table independently of a fixed header or footer. Each of these tags will hold groups of rows inside them. An example is shown below:

Tuition and fees
Item In-state Out-of-state
Estimated totals $12,357 $21,300
Tuition $8,844 $17,787
Student service fees $2,028 $2,028
COB graduate level course fee $1,485 $1,485

<table>
<caption>Tuition and fees</caption>
<thead>
<tr>
<th scope="col" style="width: 70%;">Item</th>
<th scope="col" style="width: 15%;">In-state</th>
<th scope="col" style="width: 15%;">Out-of-state</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Estimated totals</td>
<td>$12,357</td>
<td>$21,300</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tuition</td>
<td>$8,844</td>
<td>$17,787</td>
</tr>
<tr>
<td>Student service fees</td>
<td>$2,028</td>
<td>$2,028</td>
</tr>
<tr>
<td>COB graduate level course fee</td>
<td>$1,485</td>
<td>$1,485</td>
</tr>
</tbody>
</table>

Identifying row and column headers

Having designated row and/or column headers is essential to creating an accessible data table. Let’s think of a header as a title for rows and columns. In the markup, the <th> element is used for table header cells.

When a <th> element is used in Web Press, the text will shade the cell background and bold the text.

Associating data cells with appropriate headers

Using “scope” attributes is the easiest way to associate header (<th>) cells and data (<td>) cells. The scope attribute tells a browser and screen reader which data is associated with each header. For example, everything within a column is associated with the scope="col" header. Similarly, it will see that a scope="row" is a header for all cells in that particular row.

For column header cells, simply include scope="col" in the <th> tag. For row header cells, use scope="row" in the <th> tag.

Using columns headers

The table below uses scope="col" to associate column headers to data cells underneath it.

Homework Due Dates Quiz Dates Test Dates
9/2/02 9/4/02 9/6/02
9/23/02 9/25/02 9/27/02
10/14/02 10/16/02 10/18/02

 

 

 

 

 

<table width="330">
<tr>
<th scope="col">Homework Due Dates</th>
<th scope="col">Quiz Dates</th>
<th scope="col">Test Dates</th></tr>
<tr>
<td>9/2/02</td>
<td>9/4/02</td>
<td>9/6/02</td></tr>
<tr>
<td>9/23/02</td>
<td>9/25/02</td>
<td>9/27/02</td></tr>
<tr>
<td>10/14/02</td>
<td>10/16/02</td>
<td>10/18/02</td></tr></table>

Using row headers

Let’s suppose we wanted to display students’ scores. To accomplish this, we will need to add row headers on the left side of the table. The table below uses scope="row" to associate row headers to the correct data cells.

Homework 1 Quiz 1 Test 1
Bob 87% 86% 80%
Scott 92% 98% 94%
Tara 94% 82% 91%

<table width="440"><tr><td></td>
<th scope="col">Homework 1</th>
<th scope="col">Quiz 1</th>
<th scope="col">Test 1</th></tr> <tr><th scope="row">Bob</th>
<td>87%</td>
<td>86%</td>
<td>80%</td></tr> <tr><th scope="row">Scott</th>
<td>92%</td>
<td>98%</td>
<td>94%</td></tr> <tr><th scope="row">Tara</th>
<td>94%</td>
<td>82%</td>
<td>91%</td></tr></table>

Making table captions

Data tables typically have a brief descriptive text before the table, indicating the content of a table. The text should be associated with the table using the <caption> element. The <caption> element is used right after the opening <table> tag. The image below helps us understand the role of the <caption> element in a table.

<table>
<caption>Estimated program totals</caption>

The coding above can be visualized like this:

Estimated program totals
Item In-state Out-of-state
Estimated totals $12,357 $21,300
Tuition and fees $12,357 $21,300

Ask the Web Help Desk

How do I make an accessible table in Web Press?

  1. Open the Rich Text Block.
  2. Select Edit Content.
  3. Select the Table icon from the editor toolbar.
    table icon in FreeForm content window
  4. Type the number of rows you want in the Rows box and the number of columns you want inside the Columns box.
    rows and columns boxes inside the table properties window
  5. Select First Row, First Column or Both from the Header drop-down menu, depending on the location of your header(s).
    Note: This will set your <thead> and automatically set other cells as <tbody>.
    header drop-down menu in table properties window
  6. Write the caption of your table in the Caption box.
  7. Select OK.

How do I edit code in the rich text editor?

Inside the rich text editor, select the button toward the right called, “Source View.” This button will allow you to examine and edit the code inside the text table.

How will my table look on a mobile device?

As part of our ongoing campaign to increase the accessibility of Missouri State’s web pages, we have added functionality that adapts the table layout on mobile devices. While this functionality is primarily intended to increase data comprehension, it also helps users avoid zooming and side-scrolling on mobile devices. Our Full Stack Developer/Engineer, Philip Bowles, wrote a blog about rewriting table elements for mobile devices.

More information about semantic HTML elements

You may visit these links for more information about relevant HTML elements.

  • The table element
  • The caption element
  • The thead element
  • The tbody element
  • The tfoot element
  • The th element
  • About the Author
  • Latest Posts

About Alyson Epperson

Alyson Epperson is a content strategist for web strategy and development.

  • Accessibility series: Video captioning - April 5, 2018
  • Accessibility series: Creating tables - February 16, 2018
  • Accessibility: Don’t use color alone to convey content - December 13, 2017
  • Accessibility series: Headings - November 7, 2017
  • 5 ways to engage with Missouri State using social during Welcome Weekend - August 9, 2017

Filed Under: Accessibility, web strategy and development Tagged With: Accessibility, Tables, Web Press

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Omni CMS
  • Redesign
    • Academic websites
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: February 16, 2018
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
 

Loading Comments...