Data Tables with Microsoft Word: Creating Header Cells

Word won’t create the HTML markup to associate data table headers with their corresponding data cells. However, most screen readers have a table mode that can treat the top and left cells as headers, even if those cells don’t have the “th” tag that indicates a header in HTML. In practice, then, people using screen readers will probably be able to navigate a simple data table made in Word if you place your headers in the top row and/or left column of the table.

If you want to meet accessibility standards for data tables, though, you will need to make header cells. Since you can't do that with Word, you will need to either use a Web authoring program or use a text editor to change the HTML by hand.

Change data cells to header cells with a Web authoring program

First, make your page in Word and save the document as a Web page. Then you can open that Web page in a program such as Dreamweaver, FrontPage or Netscape Composer to make header cells for your data table. The next step depends on which brand of authoring program you use. For an example, here is the procedure with the free Netscape Composer:

  1. In Netscape, choose “Composer” from the “Window” menu. Composer will open with a blank document.
  2. Click the “Open” button on the toolbar and find the file you want to open.
  3. With the file open in Composer, click once in a cell you want to be a header.
  4. From the “Table” menu, choose “Table Properties.”
  5. Click the “Cell” tab at the top of the “Table Properties” dialog box.
  6. Change the “Cell Style” from “Normal” to “Header” and click “OK.”

Change data cells to header cells with a text editor

In its simplest form, the HTML for a data cell looks like this:

<td>cell content goes here</td>

To change that to a header cell, you just need to open the document in a text editor, such as Notepad or SimpleText, and change the td’s to th’s:

<th>cell content goes here</th>

In real life, a data cell in a Word Web page will look more like this:

<td width=148 valign=top style='width:2.05in;border:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>cell content goes here</p>
</td>

The principle is the same, though. Look through the HTML for the text you want to be the header, find the td’s immediately before and after, and change them to th’s:

<th width=148 valign=top style='width:2.05in;border:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal>cell content goes here</p>
</th>

On a Windows computer, Notepad will work well for editing HTML. To find the file when you go to open it, you will have to set the file type to “all.” (You can view the HTML source within Word, but can’t edit it there.)

On a Macintosh, you can edit the HTML within Word. Pull down the “View” menu, choose “HTML Source,” make your changes and click the “Save” icon on the Word toolbar.

Complex data tables

Example of a complex data table

Eye color survey
  Males Females
  Blue Brown Blue Brown
Italy 15 80 20 96
Sweden 95 8 102 5

The two eye-color headers beneath each gender header make the table above more complicated and will require some hand-coding, even if you use a Web authoring program.

Don’t rely on a screen reader’s table mode to make sense of a data table with multiple levels, like the one above. Not even making header cells will suffice. A complex data table will require special markup to match headers with data cells. See Section 508 for advice or contact a CTL Web designer: