Chapter 2: Responsive Tables

1. A two-column table

Rendered example

XHTML — code producing the example above

<table>
      <caption>EPUB Features Table</caption>
      <thead>
        <tr>
          <th scope="col">Feature</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Accessibility</td>
          <td>EPUBs are designed to be accessible to users with disabilities.</td>
        </tr>
        <tr>
          <td>Reflowable Text</td>
          <td>Text in EPUBs adjusts to fit the screen size and orientation.</td>
        </tr>
      </tbody>
    </table>

This example has two columns, one header row, and two data rows. table encloses the data; caption names it. thead holds the header row and tbody holds the data rows. Each tr is a row. th is a header cell, scope="col" associates it with its column, and td is a data cell.

2. A three-column table

Rendered example

XHTML — code producing the example above

<table>
      <caption>EPUB Standards Table</caption>
      <thead>
        <tr>
          <th scope="col">Standard</th>
          <th scope="col">Version</th>
          <th scope="col">Details</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>EPUB 2</td>
          <td>2.0</td>
          <td>First widely adopted version of EPUB.</td>
        </tr>
        <tr>
          <td>EPUB 3</td>
          <td>3.0</td>
          <td>Introduced multimedia and interactivity support.</td>
        </tr>
        <tr>
          <td>EPUB 3.2</td>
          <td>3.2</td>
          <td>Modern EPUB 3 revision with improved interoperability and accessibility guidance.</td>
        </tr>
      </tbody>
    </table>

This existing sample has three columns and three data rows, plus its header row. Its historical version labels are demonstration data, not a complete list of EPUB releases. It uses the same elements as the first table; each row now contains three cells.

3. The CSS that draws and sizes the tables

CSS — actual shared table rules

table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1em 0; }
caption { font-weight: 700; text-align: left; margin-bottom: .4em; }
th, td { border: 1px solid #888; padding: .45em; vertical-align: top; overflow-wrap: anywhere; }
th { background: #f1f2f4; }

• width: 100%: uses the available container width.
• border-collapse: collapse: merges adjacent cell borders.
• table-layout: fixed: uses fixed-layout column sizing; these examples have no explicit column widths and share space evenly.
• margin: 1em 0: adds space above and below the table.
• caption: makes the title bold, left-aligned, and separated from the table.
• th, td: shares the border, inner spacing, top alignment, and long-word wrapping rules.
• th background: gives header cells a light background.

A fixed table layout is not a guarantee that every table will read comfortably on every screen. Keep cell text manageable and check the saved EPUB with larger text. If a table becomes cramped, simplify it or divide it into smaller tables.

4. Add a row or column

XHTML — one extra row for the two-column table

<tr>
  <td>Navigation</td>
  <td>Contents links help readers find sections.</td>
</tr>

Insert this row inside the first table’s tbody before its closing tag. For an extra column, add one th in the header and one td in every body row. Keep a consistent number of cells. These examples do not use merged cells, so no rowspan or colspan is needed.

The page wrapper, stylesheet link, heading, and paragraphs follow Chapter 1. The top menu and previous/next links follow Chapter 3. The literal element names within the explanations use inline code styling; the complete source blocks use the bordered pre/code pattern.

Source guide

These examples use this template’s files. Further technical detail: W3C EPUB, HTML document structure, HTML tables, and CSS text layout.