User:Windymilla/Tables for ToCs

This page discusses the shortcomings of using a list and the "ralign" class to code a Table of Contents or List of Illustrations with page numbers, and gives examples of coding them using the HTML table entity.

Previous Coding

The CSS Cookbook (written in 2006) recommends the use of list elements and the "ralign" class, to place the chapter name on the left and the page number on the right.

Using the Cookbook code and example, on a wide-screen the page number may be a long way from the chapter name:

On a narrow screen, or where the user has an increased font size to aid legibility, the page number may overlap the chapter name:

On an e-reader device, where the HTML has been processed to epub/Kindle format by epubmaker, the effect of the ralign class is lost and the page number immediately follows the chapter name:

Worse, if the ralign span is on the same line of HTML code as the chapter name, with no space character, then there will be no space between the name and number in the epub version, i.e. "The Perfect Reader1"

Coding using a table

Simple two column ToC

A table is a layout with rows and columns, so is very suitable for a Table of Contents, List of Illustrations, etc., where there is one row for each chapter, and two or more columns of chapter information and page numbers. The example below uses margin and width auto, and a max-width value to get centered tables in all versions, but not allowing the table to become too wide in browsers. The padding-left and text-indent values cause the chapter title to have a hanging indent, as commonly seen in ToCs if the title is long enough to wrap

CSS

table.toc {
  margin: auto;
  width:auto;
  max-width: 40em;
}
td.cht {
  text-align: left;
  vertical-align: top;
  padding-left: 1em;
  text-indent: -1em;
}
td.pag {
  text-align: right;
  vertical-align: bottom;
  padding-left: 2em;
}

HTML

<table class="toc" summary="Contents">
<tr>
  <td class="cht">The Perfect Reader</td>
  <td class="pag"><a href="#Page_1">1</a></td>
</tr><tr>
  <td class="cht">The Autogenesis of a Poet</td>
  <td class="pag"><a href="#Page_5">5</a></td>
</tr><tr>
  <td class="cht">The Old Reliable</td>
  <td class="pag"><a href="#Page_19">19</a></td>
</tr>
</table>

Result:

Note: At least some types of Kindle do not right-align cells that have "text-align:right".

Three column ToC with heading

Some ToCs have the chapter number in a separate column at the beginning of each row. Also there is often a small "PAGE" heading above the page numbers. In addition to the CSS above, we define a chapter number class, chn, and th.pag:

td.chn {
  text-align: right;
  vertical-align: top;
  padding-right: 1em;
}
th.pag {
  font-weight: normal;
  font-size: smaller;
  text-align: right;
  padding-left: 2em;
}

The HTML needs the heading row and the extra cell for each chapter number:

<table class="toc" summary="Contents">
<tr>
  <th></th>
  <th></th>
  <th class="pag">PAGE</th>
</tr><tr>
  <td class="chn">I</td>
  <td class="cht">The Perfect Reader</td>
  <td class="pag"><a href="#Page_1">1</a></td>
</tr><tr>
  <td class="chn">II</td>
  <td class="cht">The Autogenesis of a Poet</td>
  <td class="pag"><a href="#Page_5">5</a></td>
</tr><tr>
  <td class="chn">III</td>
  <td class="cht">The Old Reliable</td>
  <td class="pag"><a href="#Page_19">19</a></td>
</tr>
</table>

Result:

Spanning columns

Finally, some ToCs use more than one row per chapter, for example, the chapter number appears on a row on its own, spanning both columns of the table, then the second row has the chapter description and page number. We define a new class, "ccn" for the centered chapter number, including some padding above each to separate it from the chapter above:

td.ccn {
  padding-top: 1em;
  text-align: center;
  font-variant: small-caps;
}

We use colspan="2" to make the chapter number span the two columns:

<table class="toc" summary="Contents">
<tr>
  <td class="ccn" colspan="2">Chapter I</td>
  <td></td>
</tr><tr>
  <td class="cht">The Perfect Reader</td>
  <td class="pag"><a href="#Page_1">1</a></td>
</tr><tr>
  <td class="ccn" colspan="2">Chapter II</td>
</tr><tr>
  <td class="cht">The Autogenesis of a Poet</td>
  <td class="pag"><a href="#Page_5">5</a></td>
</tr><tr>
  <td class="ccn" colspan="2">Chapter III</td>
</tr><tr>
  <td class="cht">The Old Reliable</td>
  <td class="pag"><a href="#Page_19">19</a></td>
</tr>
</table>

Result:

Indented Sub-headings

Sometimes section sub-headings or other descriptions are indented further than the chapter titles. To achieve this, and to retain the 1em hanging indent, we add a new section title class with more left padding:

td.sct {
  text-align: left;
  vertical-align: top;
  padding-left: 3em;
  text-indent: -1em;
}

Each section title gets its own row in the HTML table:

<table class="toc" summary="Contents">
<tr>
  <td class="ccn" colspan="2">Chapter I</td>
  <td></td>
</tr><tr>
  <td class="cht">The Perfect Reader</td>
  <td></td>
</tr><tr>
  <td class="sct">Section 1: A Description of Perfection and its
                  Relation to Reading, Particularly Regarding Excessively Long Section Titles</td>
  <td class="pag"><a href="#Page_1">1</a></td>
</tr><tr>
  <td class="sct">Section 2: A Description of Readers and their
                  Relation to Perfection, with a Plea for Shorter Titles</td>
  <td class="pag"><a href="#Page_3">3</a></td>
</tr><tr>
  <td class="ccn" colspan="2">Chapter II</td>
</tr><tr>
  <td class="cht">The Autogenesis of a Poet</td>
  <td class="pag"><a href="#Page_5">5</a></td>
</tr><tr>
  <td class="ccn" colspan="2">Chapter III</td>
</tr><tr>
  <td class="cht">The Old Reliable</td>
  <td class="pag"><a href="#Page_19">19</a></td>
</tr>
</table>

Result