# Using table markup to present tabular information

ID: H51

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

Using the `table` element with the child elements `tr`, `th`, and `td` makes these relationships perceivable. Techniques such as inserting tabs to create columns or using the `pre` element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.

Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.

Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e., they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.

Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.

## Examples

### A schedule marked up as a simple data table with column and row headers

This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the `th` element. This identifies the days of the week as column headers and the time intervals as row headers.

Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.

    <table>
      <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
      </tr>
      <tr>
        <th scope="row">8:00-9:00</th>
        <td>Meet with Sam</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">9:00-10:00</th>
        <td></td>
        <td></td>
        <td>Doctor Williams</td>
        <td>Sam again</td>
        <td>Leave for San Antonio</td>
      </tr>
    </table>

## Tests

### Procedure

1. Check for the presence of tabular information.

2. For each occurrence of tabular information:

   1. Check that table markup with at least the elements `table`, `tr`, `th`, and `td` is used.

### Expected Results

- All checks above are true.

## Related Techniques

- H39
- H43
- H63

## Resources

- HTML - `table` element.
- HTML - the `tr` element.
- HTML - the `th` element.
- HTML - the `td` element.