# Using the `scope` attribute to associate header cells with data cells in data tables

ID: H63

Technology: html

Type: Technique

## When to Use

HTML

## Description

The objective of this technique is to associate header cells with data cells in complex tables using the `scope` attribute. The `scope` attribute may be used to clarify the scope of any cell used as a header. The `scope` identifies whether the cell is a header for a row, column, or group of rows or columns. The values `row`, `col`, `rowgroup`, and `colgroup` identify these possible scopes, respectively.

For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used.

For simple tables that have the headers in the first row or column, it is sufficient to simply use the `th` elements without `scope`.

For complex tables use `id`s and `headers` as in Using `id` and `headers` attributes to associate data cells with header cells in data tables.

Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.

## Examples

### A simple schedule

In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use `scope="row"`. The cells in the first row too are marked up with `td` and use `scope="col"`.

    <table>
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <th scope="col">Name</th>
        <th scope="col">Phone Number</th>
        <th scope="col">City</th>
      </tr>
      <tr>
        <td>1.</td>
        <th scope="row">Charlotte Smith</th>
        <td>412-212-5421</td>
        <td>Pittsburgh</td>
      </tr>
      <tr>
        <td>2.</td>
        <th scope="row">Joetta Frere</th>
        <td>410-306-5400</td>
        <td>Baltimore</td>
      </tr>
      <tr>
        <td>3.</td>
        <th scope="row">David Walls</th>
        <td>281-511-6600</td>
        <td>New York</td>
      </tr>
    </table>

## Tests

### Procedure

For each data table:

1. Check that all `th` elements have a `scope` attribute.
2. Check that all `scope` attributes have the value `row`, `col`, `rowgroup`, or `colgroup`.

### Expected Results

- All checks above are true.

## Related Techniques

- H43
- H51

## Resources

- HTML - `th` element
- HTML - `td` element
- HTML - `scope` attribute