Table Structure

Even a simple table involves several levels of nested elements. A table’s basic structure is:

The table element defines the table itself.
Within the table are one or more tr elements that define table rows.
Within the tr elements are one or more th or td elements. These elements define table header cells and table data cells, respectively.

Here’s a simple example of a table with one row and two columns. To better illustrate the structure of the table, we’ve added a snippet of CSS to provide each table cell with a border.

Example 4.1. 1×2 Table

<html>
<head>
  <title>1x2 Table</title>
  <style>
    td { border: 1px solid #000000; }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>California</td>
      <td>Michigan</td>
    </tr>
  </table>
</body>
</html>

Adding Rows and Columns

A tr element represents a row. To add another row, just add another tr element with the same number of tds (columns) as the rest of the table:

Example 4.2. 2×2 Table

					<table>
					<tr>
					<td>California</td>
					<td>Michigan</td>
					</tr>
					<tr>
					<td>Nevada</td>
					<td>Ohio</td>
					</tr>
					</table>

A td represents a table data cell. To add another column, add another td element to each tr in the table:

Example 4.3. 2×3 Table

<table>
  <tr>
    <td>California</td>
    <td>Michigan</td>
    <td>Mississippi
  </tr>
  <tr>
    <td>Nevada</td>
    <td>Ohio</td>
    <td>Alabama</td>
  </tr>
</table>

Adding Headers

So far, we’ve seen table rows containing td (table data) elements. However, rows can also contain th (table header) elements. Table headers label a row or column. By default, most browsers render table headers as bold.

Example 4.4. Table with Headers

<table>
<tr>
    <th>West</th>
    <th>Midwest</th>
    <th>South</th>
  </tr>
  <tr>
    <td>California</td>
    <td>Michigan</td>
    <td>Mississippi
  </tr>
  <tr>
    <td>Nevada</td>
    <td>Ohio</td>
    <td>Alabama</td>
  </tr>
</table>

Tip

If you leave any table data or table header empty (<td></td>), the cell will collapse and look unattractive. To prevent this from happening, you can place a special “non-breaking space” entity,  , in the cell. This inserts an invisible character that forces the browser to draw the borders of the cell.

Adding Captions and Summaries

You can provide additional information about a table by giving it a caption or a summary.

The table element’s summary attribute provides a short text summary of the table. Most browsers do not display the summary directly, but screen readers and text-only browsers can provide this text to their users. If you hover your mouse over the table, some browsers will display the summary text as a tooltip.

The caption element, which must immediately follow the <table> open tag, provides the table’s title. By default, the caption appears directly above the table. Some browsers display the caption centered above the table, others display it left-aligned. You may use CSS to align and style the caption accordingly.

Table Rows, Cells, and Headers

Once you have placed the (optional) <caption>, it’s time to start constructing the actual table. Tables are composed of table rows (<tr>). Each pairing <tr>...</tr> defines a row.

Within each table row are one or more cells, which are either table data (<td>) or table headers (<th>). Table header cells are supposed to contain “header” information, such as the title of a row or colum. Table data cells are supposed to contain the data. Note that if you leave any table cell completely empty (”<td></td>“), the cell will collapse and look unattractive. It’s best to put something in a blank cell, even if it’s just a <br> element.

Let’s take a look at an example that incorporates all of these elements. The previous table had one row and two columns. The following table has four rows and four columns.

Example 4.5. 4×4 Table

<table cellpadding="5" border="2"
summary="All 12 months, organized by season">
  <caption>The Four Seasons</caption>
  <tr>
    <th>Spring</th>
    <th>Summer</th>
    <th>Fall</th>
    <th>Winter</th>
  </tr>
  <tr>
    <td>March</td>
    <td>June</td>
    <td>September</td>
    <td>December</td>
  </tr>
  <tr>
    <td>April</td>
    <td>July</td>
    <td>October</td>
    <td>January</td>
  </tr>
  <tr>
    <td>May</td>
    <td>August</td>
    <td>November</td>
    <td>February</td>
  </tr>
</table>

As you can see, even a simple 4×4 table takes a fair amount of coding.

A few things to consider:

Look carefully back and forth between the code and the results, and make sure that you understand how each month ends up in the proper row and column. Do you understand why there is one row of seasons and three rows of months? Do you understand why each column of months lines up the way it does?
The <th> text is bold, while the <td> is plain. This is the default font weight for these elements, although of course you can change this with style sheets.
The summary attribute does not appear anywhere on the screen. It’s really meant for non-graphical browsers, but we’ll keep being a good citizen and continue to put it in.

The Pocket HTML Tutorial

Chapter 4. Tables