Staff Meeting

Summary

"SUMMARY provides a summary of the table. In previous versions of HTML, authors had limited means to provide metainformation about a table. Any introductory explanations weren't structurally linked to the table itself. Tables now have two options for text-based descriptions: the SUMMARY element and the CAPTION attribute." - Michael G. Paciello

"Summaries are especially useful to non-visual readers. It is important to summarize the relationship among TABLE cells and cells that span multiple columns or rows - especially those involving nested headings. Relationships that may be obvious in a visual rendering of the TABLE may not be apparent when that TABLE is interpreted by a screen reader. A detailed summary can be instrumental in making those relationships clear. A summary is also useful in describing how the TABLE is incorporated into the body or text of the document. For example, consider a web document comparing all-time great hockey players from different eras. A summary detailing how the statistics presented in the TABLE fit into the accompanying text could be very useful to those relying on speech synthesisers or braille." - A-Prompt

Provide a summary for tables - Bobby

WAI checkpoint (5.5)

Provide summaries for tables. - W3c example

Use the summary attribute to list the data represented; don't just name it. Don't say, "Listings of television shows on tonight," instead say "On channel 2, the news from 8 to 10. On channel 3, the movie 'Jaws' from 7:30 to 11:00. ..."- Kynn Bartlett

Note! It will get tedious to do the above, and probably won't all fit nicely in one attribute. Therefore, if your summary is going to be more than about 200 characters (as it probably will be), you should provide a link OUTSIDE of the table reading something like "Text summary of table" which goes to a page with a long summary. Then make the summary attribute read, "Listings of television shows on tonight: Summary link follows table." - Kynn Bartlett

Caption

CAPTION is intended for a short description of the table's contents. It can be likened to the TITLE attribute for the overall document.

Use a <caption> attribute to label your table if the content requires it. Don't use title to label your data table

"Web content authors should use CAPTIONS to indicate the purpose of a TABLE within a document (i.e. what the TABLE contains or is meant to convey). The CAPTION element is important because it attaches an identifiable label to a TABLE and assists adaptive technologies in extracting specific information from the TABLE by creating automatic numbering schemes and separating the data contained in cells into individual files. The CAPTION should be inserted immediately following the TABLE element and include the TABLE'S title. In addition, the WAI recommends the CAPTION be left in its default position - centered above the TABLE - so that the content and purpose of the TABLE is immediately identifiable." - A-Prompt

Table Captions: The CAPTION element - W3c

If this is a data table (not used for layout only), provide a caption - Bobby

Scope

"scope" assumes that you can designate a header as applying to "everything in this row" or "everything in this column", or even "everything in this group of rows or columns," where the row, column, colgroup, or rowgroup is the one containing the header cell. This is how simple tables work, but it may need to be spelled out for complex tables. scope is an attribute set on the header cell, not on the data cells. (You may need to use <tbody>, <colgroup>, and <col> to designate groups of rows or columns.) - Kynn Bartlett

Using the "scope" attribute is one of the most effective ways of making HTML compliant with 508 requirements. It is also the simplest method to implement. The scope attribute also works with some (but not all) assistive technology in tables that use "colspan" or "rowspan" attributes in table header or data cells.= Using the Scope Attribute – The first row of each table should include column headings. Typically, these= column headings are inserted in <TH> tags, although <TD> tags can also be used. These tags at the top of= each column should include the following attribute:

scope="col"

By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably "id" and "headers") there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells:

scope="row"

By simply adding this attribute, the text in that cell becomes associated with every cell in that row. While this technique dramatically improves the usability of a web page, using the scope attribute does not appear to interfere in any way with browsers that do not support the attribute.

scope = scope-name - W3c. "For a given header cell, the scope attribute tells the user agent the data cells for which this header provides information. Authors may choose to use this attribute instead of headers according to which is more convenient; the two attributes fulfill the same function. The headers attribute is generally needed when headers are placed in irregular positions with respect to the data they apply to. "

Row groups: the THEAD, TFOOT, and TBODY elements

"If a data TABLE has two or more logical levels of row or column headings, Web Accessibility Initiative (WAI) guidelines state that web content authors must use HTML markup to link data cells with their corresponding headers. For example, to identify structural groups of rows, content authors should use the THEAD, TFOOT, and TBODY elements. To group columns use the COL and COLGROUP elements. The "headers", "scope", and "axis" attributes are useful for creating a clear association between column/row headings and TABLE cell data. They are also useful for extracting specific information from a TABLE. Grouping the TABLE'S rows into head, foot, and body sections, permits the body to be scrolled independently of the head and foot. Additionally, TABLE head and foot information will be repeated on each page containing data when large TABLES are printed. TABLE head (THEAD) and foot (TFOOT) elements are designed to provide information about the TABLE'S columns. The TABLE body (TBODY) section contains the rows of statistical information within the data."- A-Prompt

"If you're creating a large table, consider using <thead>, <tfoot>, <tbody>, <colgroup>, and <col>. The purpose of these elements and attributes is to allow you to group together rows or columns and give them a special designation. This can be useful for styling, scrolling, or printing, but is usually going to be overkill on any table with less than 50 cells. " - Kynn Bartlett

Headers

"Headers assume that you may not be able to easily a header as applying to to whole rows, columns, or groups thereof. You designate the relationship on the data cells themselves, not on the header cells. The header cells simply need an id attribute to be set. More than one header can be applied to each cell; you just give a list of header ids separated by spaces. - Kynn Bartlett

"Headers enable nonvisual user agents to retain the relational information conveyed by headings in a visual display. When viewing a visual rendering of a menu, the sighted user can repeatedly refer to the headings to reinforce the category for each dish presented. To accomplish this, each header is given a unique ID attribute. Subsequent table cells then refer to the applicable header ID." - Michael G. Paciello

"headers" attribute - W3c example

Associating header information with data cells - W3c. "For a given data cell, the headers attribute lists which cells provide pertinent header information. For this purpose, each header cell must be named using the id attribute. Note that it's not always possible to make a clean division of cells into headers or data. You should use the TD element for such cells together with the id or scope attributes as appropriate. "

headers = idrefs - W3c

Unlike using the "scope" attribute, using the "id" and "headers" attributes requires that every data cell in a table include special attributes for association. Although its usefulness for accessibility may have been diminished as browsers provide support for the "scope" attribute, the "id" and "headers" attributes are still very useful and provide a practical means of providing access in smaller tables.

axis

"AXIS lets you associate together cells, groups cells associated by headers, and groups of cells associated by scope. You set the axis attribute on a cell, and that cell is part of the axis defined by that value. If the cell has a @scope attribute set, the cells within that scope are part of the axis. If a cell with an @axis has an id, then any other cells which list the id in their headers attributes are part of the @axis. In theory, this lets a browser "query" a table and return information. In practice, I don't know of any browsers which do that, and in general, if you are at this level of complexity then you perhaps should offer your content in alternate formats, or perhaps in multiple tables. "- Kynn Bartlett

"Complex tables often present information that may be grouped across cells, columns, and rows. The tools provided in headers, IDs, and abbreviations can't fully address these needs. The AXIS attribute enables the relational grouping of data anywhere in a table. In order to structure the table for all logical groupings, each unique category must have a unique ID." - Michael G. Paciello

axis= cdata - W3c

Abbr

Consider using abbreviations for headers - Kynn Bartlett

There are two issues here:

If you want to display a short header which logically means something larger -- such as using "PID" instead of "Product Identification" -- then you will use the <abbr> tag within the <th> to offer up the longer expansion.
If you want to display a long header, such as "Store Located in Temecula, California", you should consider using an @abbr attribute on the <th> tag, with a value such as "Temecula."

© 1998-2025 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2006
Page URL: http:// www.d.umn.edu /~lcarlson/staffmeeting/tables_data.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.

Data Table References

General

Summary

Caption

Scope

Row groups: the THEAD, TFOOT, and TBODY elements

thead

tbody

tfoot

Headers

axis

id = name

COL

Abbr