Table Structure

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

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, &nbsp;, 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: