MEP-0012

Table Header Cells

This page proposes adding a th element for use in tables instead of the td element for cells that function as headers.

Authors: Shaun McCance
Created: 2018-03-01
Status: final (2019-01-31)
Target: 1.1
Issue: https://github.com/projectmallard/projectmallard.org/issues/9
History:
show history
hide history
history
2018-03-01 1.1 proposed
2018-03-08 1.1 implemented
2019-01-31 1.1 final

Background

Mallard tables mostly mimic HTML tables for layout purposes, with some simplifications for table styling. Notably absent from Mallard tables, however, is the th element. The th element is important to screen readers and other assistive technologies, as it can help to convey information that is otherwise only discernable from visual presentation.

Proposal

This page proposes adding the th element. This element would be allowed wherever the td element is allowed, and would effectively function the same as a td element for layout purposes. The th element would accept the same attributes as the td attribute, including those for row and column spanning. In addition, the th element should accept the scope attribute, with the same definition as in HTML.

The scope attribute helps to identify which group of table cells the th element applies to. It is generally not necessary when the th element is in the first row (applying to the column), or in the first position in a row (applying to the row). It is useful when a th element applies to entire row groups or column groups.

Note that HTML also provides the headers attribute to identify which th elements correspond to which td elements in cases even more complex than those that can be handled with the scope attribute. This proposal does include adding the headers attribute, in part because such complex tables are rare, and in part because Mallard is stricter than HTML concerning id attributes.

Examples

Use th elements for column headers:

<table>
  <tr>
    <td></td>                <th><p>Scientific name</p></th>
    <th><p>Length</p></th>   <th><p>Mass</p></th>
  </tr>
  <tr>
    <td><p>Mallard</p></td>  <td><p>Anas platyrhynchos</p></td>
    <td><p>56-65 cm</p></td> <td><p>900-1200 g</p></td>
  </tr>
  <tr>
    <td><p>Eurasian Wigeon</p></td> <td><p>Anas penelope</p></td>
    <td><p>45-50 cm</p></td>        <td><p>680 g</p></td>
  </tr>
  <tr>
    <td><p>Common Teal</p></td> <td><p>Anas crecca</p></td>
    <td><p>34-43 cm</p></td>    <td><p>360 g</p></td>
  </tr>
  <tr>
    <td><p>Northern Pintail</p></td> <td><p>Anas acuta</p></td>
    <td><p>59-76 cm</p></td>         <td><p>450-1360 g</p></td>
  </tr>
</table>

Scientific name

Length

Mass

Mallard

Anas platyrhynchos

56-65 cm

900-1200 g

Eurasian Wigeon

Anas penelope

45-50 cm

680 g

Common Teal

Anas crecca

34-43 cm

360 g

Northern Pintail

Anas acuta

59-76 cm

450-1360 g

Use th elements for column and row headers:

<table>
  <tr>
    <td></td>                <th><p>Scientific name</p></th>
    <th><p>Length</p></th>   <th><p>Mass</p></th>
  </tr>
  <tr>
    <th><p>Mallard</p></th>  <td><p>Anas platyrhynchos</p></td>
    <td><p>56-65 cm</p></td> <td><p>900-1200 g</p></td>
  </tr>
  <tr>
    <th><p>Eurasian Wigeon</p></th> <td><p>Anas penelope</p></td>
    <td><p>45-50 cm</p></td>        <td><p>680 g</p></td>
  </tr>
  <tr>
    <th><p>Common Teal</p></th> <td><p>Anas crecca</p></td>
    <td><p>34-43 cm</p></td>    <td><p>360 g</p></td>
  </tr>
  <tr>
    <th><p>Northern Pintail</p></th> <td><p>Anas acuta</p></td>
    <td><p>59-76 cm</p></td>         <td><p>450-1360 g</p></td>
  </tr>
</table>

Scientific name

Length

Mass

Mallard

Anas platyrhynchos

56-65 cm

900-1200 g

Eurasian Wigeon

Anas penelope

45-50 cm

680 g

Common Teal

Anas crecca

34-43 cm

360 g

Northern Pintail

Anas acuta

59-76 cm

450-1360 g

Add a th element for a column group:

<table rules="colgroups">
  <colgroup><col/></colgroup>
  <colgroup><col/></colgroup>
  <colgroup><col/><col/></colgroup>
  <tr>
    <td></td> <td></td>
    <th colspan="2" scope="colgroup"><p>Size information</p></th>
  </tr>
  <tr>
    <td></td>                <th><p>Scientific name</p></th>
    <th><p>Length</p></th>   <th><p>Mass</p></th>
  </tr>
  <tr>
    <th><p>Mallard</p></th>  <td><p>Anas platyrhynchos</p></td>
    <td><p>56-65 cm</p></td> <td><p>900-1200 g</p></td>
  </tr>
  <tr>
    <th><p>Eurasian Wigeon</p></th> <td><p>Anas penelope</p></td>
    <td><p>45-50 cm</p></td>        <td><p>680 g</p></td>
  </tr>
  <tr>
    <th><p>Common Teal</p></th> <td><p>Anas crecca</p></td>
    <td><p>34-43 cm</p></td>    <td><p>360 g</p></td>
  </tr>
  <tr>
    <th><p>Northern Pintail</p></th> <td><p>Anas acuta</p></td>
    <td><p>59-76 cm</p></td>         <td><p>450-1360 g</p></td>
  </tr>
</table>

Size information

Scientific name

Length

Mass

Mallard

Anas platyrhynchos

56-65 cm

900-1200 g

Eurasian Wigeon

Anas penelope

45-50 cm

680 g

Common Teal

Anas crecca

34-43 cm

360 g

Northern Pintail

Anas acuta

59-76 cm

450-1360 g

Add th elements for row groups:

<table rules="rowgroups" shade="rows">
  <thead>
    <tr>
      <td></td>                <th><p>Scientific name</p></th>
      <th><p>Length</p></th>   <th><p>Mass</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="rowgroup">
        <p>America, Europe, Asia, New Zealand</p>
      </th>
    </tr>
    <tr>
      <th><p>Mallard</p></th>  <td><p>Anas platyrhynchos</p></td>
      <td><p>56-65 cm</p></td> <td><p>900-1200 g</p></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="rowgroup">
        <p>Eurasia</p>
      </th>
    </tr>
    <tr>
      <th><p>Eurasian Wigeon</p></th> <td><p>Anas penelope</p></td>
      <td><p>45-50 cm</p></td>        <td><p>680 g</p></td>
    </tr>
    <tr>
      <th><p>Common Teal</p></th> <td><p>Anas crecca</p></td>
      <td><p>34-43 cm</p></td>    <td><p>360 g</p></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="rowgroup">
        <p>Europe, Asia, North America</p>
      </th>
    </tr>
    <tr>
      <th><p>Northern Pintail</p></th> <td><p>Anas acuta</p></td>
      <td><p>59-76 cm</p></td>         <td><p>450-1360 g</p></td>
    </tr>
  </tbody>
</table>

Scientific name

Length

Mass

America, Europe, Asia, New Zealand

Mallard

Anas platyrhynchos

56-65 cm

900-1200 g

Eurasia

Eurasian Wigeon

Anas penelope

45-50 cm

680 g

Common Teal

Anas crecca

34-43 cm

360 g

Europe, Asia, North America

Northern Pintail

Anas acuta

59-76 cm

450-1360 g

Accessibility

The primary reason for adding the th element is to help provide additional information to screen readers and other assistive technologies.

Compatibility and Fallback

This proposal makes no backwards-incompatible changes. Any page written in a version prior to the implementation of this proposal will work exactly the same in a processing tool that implements this proposal.

This proposal adds a new element in a context with no defined behavior for unknown elements. The likely fallback behavior on non-supporting tools is that th elements will be ignored entirely. Depending on how consistently th elements are used, this could result in some rows or columns being misaligned. Do not use the th element if your documents must be processed by older tools.

Although non-standard, the Yelp stylesheets have supported the th element in the core Mallard namespace since version 3.16 in 2015, although notably without support for the scope attribute.

Comparison to Other Formats

The proposed Mallard th element works similarly to the HTML th element, since Mallard tables work similarly to HTML tables.

DocBook allows both HTML tables and CALS tables. When using HTML tables, DocBook allows the th element with the same meaning. CALS tables do not have an element similar to the th element. However, DocBook appears to have extended CALS tables to allow the scope and headers elements on the entry element, possibly to allow that element to function as a header.

DITA uses CALS tables, which do not have an element similar to the th element.

© 2018 Shaun McCance
cc-by-sa 3.0 (us)

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this document under the terms of your choosing, without restriction.

Powered by
Mallard