Layout Tables

Summary

Use CSS styling rather than table elements to lay out content in a grid.

Caution

Using tables for layout purposes is no longer valid in HTML. See the frequently asked questions for more information.

Techniques

Use CSS grid, flex, table, and similar alternative layouts for non-tabular content. [[WCAG-1.3.1]]

Examples

Example 1 — Layout table

In this example, a layout table is used to position to lists side-by-side. The following examples show how to avoid this type of markup.

<table role="presentation">
   <tr>
      <td>
         <ul>
            …
         </ul>
      </td>
      <td>
         <ul>
            …
         </ul>
      </td>
   </tr>
</table>

Example 2 — Alternative CSS grid layout

In this example, the layout table in Example 1 is replaced by CSS grid styling. The grid-template-column property assigns half the available space to each of the two columns.

HTML:
<div class="grid">
   <ul>
      …
   </ul>
   <ul>
      …
   </ul>
</div>

CSS:
.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

Example 3 — Alternative CSS flex layout

In this example, the layout table in Example 1 is replaced by CSS flex styling.

HTML:
<div class="flex">
   <ul>
      …
   </ul>
   <ul>
      …
   </ul>
</div>

CSS:
.flex {
   display: flex;
   justify-content: space-evenly;
}

Example 4 — Alternative CSS table layout

In this example, the layout table in Example 1 is replaced by CSS table styling. The role presentation is added to ensure that assistive technologies do not announce that there is a table (they may recognize the CSS as table markup).

HTML:
<div class="table" role="presentation">
   <div class="row">
      <ul class="cell">
         …
      </ul>
      <ul class="cell">
         …
      </ul>
   </div>
</div>

CSS:
.table {
   display: table;
   width: 100vw;
}
.row {
   display: table-row;
}
.cell {
   display: table-cell;
   width: 50vw;
}

Frequently Asked Questions

When did it become illegal to use layout tables?

There were originally two competing HTML5 specifications. The W3C version recommended not using layout tables, while the WHATWG version made their use illegal.

The W3C's version of HTML has now been abandoned, and is no longer referenced by EPUB 3, so it is no longer valid to use tables except to layout tabular data.

As a result of this divergent guidance, older digital publications may have layout tables. These tables must follow the requirements for accessible layouts (i.e., no semantic tags).

New content must not contain layout tables.

Explanation

Given the variety of CSS layout models that are now supported, using tables for purely presentational purposes is no longer justified.

The HTML specification now expressly forbids using tables for layout:

Tables must not be used as layout aids. Historically, some web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming …

The use of tables for layouts has always been problematic for users of assistive technologies. While the use of table markup was transparent to visual readers, it forced AT users into table reading mode. Authors rarely considered that these users would be forced to navigate by cell and row to read their content, and often failed to ensure that their layouts made logical reading sense. AT users would often have to guess whether to read down a column or across rows to logically follow the layout.

Note

Validation tools, such as epubcheck, cannot detect layout tables. Manual inspection for their presence is necessary.

Older Content

As digital publications created before the change in HTML requirements may contain layout tables, it is still essential that this content follow the applicable accessibility guidelines.

For layout tables, this means that the table markup must not include any data table elements or attributes. These include: the thead, th and caption elements, and headers and scope attributes (also the summary attribute if creating HTML4 or XHTML 1.1 documents).