University IT
Table Basics
The following is an example of a simple data table:
| Name | Start Year | End Year |
|---|---|---|
| David Starr Jordan | 1891 | 1913 |
| John Casper Branner | 1913 | 1915 |
| Ray Lyman Wilbur | 1916 | 1943 |
| Donald B. Tresidder | 1943 | 1948 |
| J. E. Wallace Sterling | 1949 | 1968 |
| Kenneth S. Pitzer | 1968 | 1970 |
| Richard W. Lyman | 1970 | 1980 |
| Donald Kennedy | 1980 | 1992 |
| Gerhard Casper | 1992 | 2000 |
| John Hennessy | 2000 | 2016 |
| Marc Tessier-Lavigne | 2016 | Present |
Users can understand the data by looking at two header sections. The first row contains column headers (Name, Start Year, End Year). Each row also has a row header (the president's name). Using the column and row headers, users can visually determine quickly that Richard Lyman ended his presidency in 1980.
| Name | Start Year | End Year |
|---|---|---|
| David Starr Jordan | 1891 | 1913 |
| John Casper Branner | 1913 | 1915 |
| Ray Lyman Wilbur | 1916 | 1943 |
| Donald B. Tresidder | 1943 | 1948 |
| J. E. Wallace Sterling | 1949 | 1968 |
| Kenneth S. Pitzer | 1968 | 1970 |
| Richard W. Lyman | 1970 | 1980 |
| Donald Kennedy | 1980 | 1992 |
| Gerhard Casper | 1992 | 2000 |
| John Hennessy | 2000 | 2016 |
| Marc Tessier-Lavigne | 2016 | Present |
This obvious visual association must be communicated programmatically to be considered accessible. Column and row headers must be correctly defined using methods available in the platform or medium where the table is created. For example, in HTML, column headers are identified as <th> elements with scope="col" and row headers are idenfitied as <th> elements with scope="row". Review platform-specific guidance in the Techniques section of this site.
