Tables

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

General principles for using tables

The HTML <table> element is used to specify data with more than one dimension, i.e., data in rows and columns, where the exact alignment of these rows and columns is significant—and the content would be hard or impossible to understand if it were rearranged.

Thus, an index or a list in two columns, where those two columns are independent of each other, is not a <table>. A list of illustrations with left-aligned captions and right-aligned page numbers, however, may be formatted as a <table>.

The <table> element should not be used for laying out non-tabular data; it is the appropriate element for tabular data.

If your table has headers, make sure you use <th> (table header) elements for them. All other table cells should go in <td> (table data) elements.

How to make your tables more readable

Tables are one of the cases where your HTML code might become structurally complex, with lots of nested elements. If you place too much code onto each line, disregarding the nested structure, your tables might be very hard to read—firstly, for yourself; secondly, for anyone else who might look at your code in the future.

In order to clearly convey a table’s structure—and to avoid errors in your HTML—it really helps to indent the code to reflect the nesting levels. Compare the following two examples:

<table summary="A table"><tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td class="center">Cell 1</td><td class="right">Cell 2</td></tr>
<tr><td class="center">Cell 1</td><td class="right">Cell 2</td></tr></table>
<table summary="A table">
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td class="center">Cell 1</td>
    <td class="right">Cell 2</td>
  </tr>
  <tr>
    <td class="center">Cell 1</td>
    <td class="right">Cell 2</td>
  </tr>
</table>

Which of them makes it easier to understand the table structure—and to see whether you might have forgotten a whole cell or a closing tag somewhere?

Tables of contents (and lists of illustrations, etc.)

One very common example for the appropriate use of a table, in our e-books, is a table of contents with chapter numbers and/or titles and page numbers; in a case like that, the association between the chapter number and/or title and the page number is relevant, so we have genuine data with more than one dimension. The same goes for lists of illustrations (despite the name!) if they contain right-aligned page numbers.

Look at the following table of contents:

Sample table of contents


This table has three columns: lecture numbers, lecture titles, and page numbers. The lecture numbers and page numbers are right-aligned, whereas the lecture titles are left-aligned (and in small-caps).

Appropriate markup for the table might look like this:

<table id="toc" summary="Contents">
  <tr>
    <th>LECTURE</th>
    <th>&nbsp;</th>
    <th>PAGE</th>
  </tr>
  <tr>
    <td class="chapnum">I.</td>
    <td class="small-caps">Current Tendencies</td>
    <td class="right"><a href="#Page_3">3</a></td>
  </tr>
  <tr>
    <td class="chapnum">II.</td>
    <td class="small-caps">Logic as the Essence of Philosophy</td>
    <td class="right"><a href="#Page_33">33</a></td>
  </tr>
  [... further rows omitted ...]
  <tr>
    <td>&nbsp;</td>
    <td class="small-caps">Index</td>
    <td class="right"><a href="#Page_243">243</a></td>
  </tr>
</table>

The first row (<tr>) contains the table headings (<th>). The <table> gets an id attribute and the data cells (<td>) get class names so that, using CSS, we can make the table resemble the original as closely as possible:

.small-caps
{
  font-variant: small-caps;
}

#toc
{
  margin: auto;
}

#toc th
{
  text-align: right;
  font-weight: normal;
  font-size: small;
}

#toc td
{
  padding-top: 0.75em;
  vertical-align: top;
}

#toc td.chapnum
{
  text-align: right;
  padding-right: 0.5em;
}

#toc td.right
{
  text-align: right;
  padding-left: 3em;
  vertical-align: bottom;
}

Look at this!

Tables with borders

If your table has borders, you can define them using CSS—which knows several different border styles. Depending on where the borders appear, it might be easier to set them on all <th> and <td> elements and specifically define exceptions where there are no borders; or to define classes and apply them to all cells that have borders.

Let’s look at an example:

Sample table with borders


This table has (different) borders above and below the headers; those are easily defined by specifying the relevant properties for the <th> elements:

#log th
{
  border-top: 4px double black;
  border-bottom: 1px solid black;
}

In addition, there are borders to the right of every cell, except for those in the very last column; and for one of the columns there are double lines instead of single ones. So in this example, it makes sense to define a single right border for all <th> and <td> elements, and then to define exceptions for the instances where we don’t need them:

#log td,
#log th
{
  border-right: 1px solid black;
}

#log th.no-border-right,
#log td.no-border-right
{
  border-right: none;
}

#log th.double-border-right,
#log td.double-border-right
{
  border-right: 4px double black;
}

The corresponding HTML markup for the first data row would look like this:

<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>Robert Robison</td>
  <td class="double-border-right">Lieutenant</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td class="no-border-right">&nbsp;</td>
</tr>

Note that most of the cells don’t need classes for the borders—just the two that are different from all of the others.

Alternatively, it would have been possible to define CSS classes for all kinds of borders that occur anywhere in the table and apply them wherever there are borders. In this case, that would have resulted in a lot more markup and would have been harder to read—but for tables where only a few of the cells need borders, it would be the more sensible approach.

Look at this!

Things that are not tables

As explained above, the HTML <table> element should be used to mark up tabular data and only tabular data. Something like a centred box with a border, containing some text, is not a table:

Sample box that is not a table


This example does not contain any text that needs to be laid out in more than one dimension; there are just two ordinary paragraphs, and between them, there is some centred text with a border around it. To reflect this, our HTML for the box might look like this:

<div class="box">
  <p class="larger">PEANUT EMPORIUM!!</p>

  <p class="smaller">SIGN OF THE CRAB</p>

  <p>MISS SCRICKET, BILLY &amp; CO.</p>

  <p class="smaller">PEANUTS STRICTLY FRESH EVERY YEAR</p>

  <p class="smaller less-space-above">CALL EARLY AND OFTEN</p>
</div>

As you can see, we are defining a <div> for the box itself, and nested paragraphs, with class names for additional styling, for the lines of text inside. This gives us all the “hooks” we need to make the box look very similar to the original using CSS:

.box
{
  border: 2px solid black;
  max-width: 23em;
  margin: 1.5em auto;
}

.box p
{
  text-align: center;
}

The box itself needs a border. We have also used the “max-width” CSS property so that the box won’t span the whole text width. The width is specified in em so that it is dependent on the font and font size of the text; the box should thus always be about as wide as it needs to be, even if the user resizes the text and/or the browser window. Using “max-width” instead of “width” allows the lines to break if the browser window is too narrow for them to fit. We have also allowed for some extra space to the left and right because fonts differ in their widths and some might need a little more space for the text to fit within the box. In cases where you need to “guess” a width, it is always a good idea to leave some extra room—as explained in the approximately-centred poetry example in the Case Study on Poetry.

To centre the box inside the text block, we are setting the left and right margins to “auto”. Finally, the paragraphs inside the box are set to be centred as well.

Look at this!

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu