Tables

Tables allow you to arrange HTML elements in a grid. There are two main uses for tables:

• Displaying rows and columns of data
• Laying out elements on a page

This section covers table basics: how to create table cells and table headers and how to adjust the padding and borders.

Introduction to Tables

Tables are rather complicated beasts. The basic idea is the following:

1. The <table> tag defines the table itself.

2. Within the <table> are one or more <tr> tags. These tags define table rows.

3. Within the <tr> tags are one or more <th> or <td> tags. These tags define table header cells and table data cells, respectively.

Before we go any further, here's a quick example of a table with one row and two columns:

<table cellpadding="5" border="1">
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>
</table>

Our table has one row and two cells inside that row.

Let's take a look at the components of a table in more detail.

The <table> Tag

The <table> tag begins and ends all tables. This tag has a number of important attributes. Some of these attributes, such as cellpadding and border, have analogues in CSS. You can indeed adjust these fields using CSS -- however, we'll be doing this the "old-fashioned" way for now, and covering CSS table styling a bit later.

• border="N": Creates a ridged border around each cell, "N" pixels wide.
• cellpadding="N": Provides padding for each cell, "N" pixels wide.
• cellspacing="N": Provides spacing around each cell, "N" pixels wide.
• summary="": 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.

Table Captions

Any table can have a caption, defined by a <caption> tag. The <caption> tag must be placed immediately after the initial <table> tag.

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 unattractive. It's best to put something in a blank cell, even if it's just a <br> tag.

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.

<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 4x4 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 tags, 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.

Borders, Padding, and Spacing

The <table> tag has three attributes that provide some basic control over the spacing around table cells: border, cellpadding, and cellspacing. These three table attributes are similar to the CSS properties border, padding, and margin. Let's see how they work.

First we'll create a table with no borders, cellpadding, or cellspacing. In order to make things a little easier to see, we'll use CSS to color the background of the table (green) and the individual table cells (yellow).

...

<style>
<--
  table { 
    background: #009900;
  }

  td {
    background: #ffff00;
  }
-->
</style>
...

<table 
  border="0" cellpadding="0" cellspacing="0"
  summary="No padding, spacing, or borders">
<tr>
  <td>Left Cell</td>
  <td>Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

With no border, cellspacing, or cellpadding, our three cells are quite cramped. Because there is no spacing between the cells, we can't see the green background of the table -- just the yellow background of the individual cells.

Let's try setting each of these attributes to "5" (five pixels) separately. We'll maintain the same green and yellow coloring scheme.

...

<style>
<--
  table { 
    background: #009900;
  }

  td {
    background: #ffff00;
  }
-->
</style>
...

<h4>5px Border</h4>
<table 
  border="5" cellpadding="0" cellspacing="0"
  summary="Table with a 5px border">
<tr>
  <td>Left Cell</td>
  <td>Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

<h4>5px Cellpadding</h4>
<table 
  border="0" cellpadding="5" cellspacing="0"
  summary="Table with 5px cellpadding">
<tr>
  <td>Left Cell</td>
  <td>Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

<h4>5px Cellspacing</h4>
<table 
  border="0" cellpadding="0" cellspacing="5"
  summary="Table with 5px cellspacing">
<tr>
  <td>Left Cell</td>
  <td>Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

What are the results?

1. In the first table, border="5". We see a five-pixel border around the edge of the table.
2. In the second table, cellpadding="5". The size of each cell has expanded by five pixels in every direction.
3. In the third table, cellspacing="5". Each cell is separated from its neighbors by five pixels. This spacing enables us to see the green background of the table itself.

Finally, let's set all three attributes. We'll set the border to 5px, the cellspacing to 10px, and the cellpadding to 20px.

<table 
  border="5" cellpadding="20" cellspacing="10"
  summary="Table with a 5px border, 
    20px cellpadding, and 10px cellspacing">
<tr>
  <td>Left Cell</td>
  <td>Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

The ridged border around the table is five pixels wide, the cells are ten pixels apart, and the cells themselves have twenty pixels of padding. Some browsers will display the border colored with the background color, green; others will leave the ridged border colorless.

CSS Borders, Padding, and Spacing

For more sophisticated control over borders, spacing, and padding, you can use CSS. Note that support for this control is somewhat spotty in the "version 4" browsers and non-existent in older browsers. One way to handle this problem is to set the borders, cellpadding, and cellspacing using the attributes above, and then refine the values further using CSS. (For most browsers that understand CSS, the CSS rules will override the <table> attributes.)

The CSS properties are as follows:

• The padding CSS property corresponds to the cellpadding table attribute.
• The border-spacing CSS property corresponds to the cellspacing table attribute.
• The border CSS property corresponds to the border table attribute.

The CSS properties allow us to use any valid CSS length: px are okay, as are em, pt, and so on. We'll stick with pixels for our example below.

...

<style>
<--
  table {
    background: #009900;
    border: 4px #ff00ff ridge;
    border-spacing: 5px;
  }

  td {
    background: #ffff00;
    padding: 10px;
    border: 2px #0000ff dotted;
  }

  td.middle {
    border: 2px #ff0000 solid;
    padding-right: 25px;
  } 
-->
</style>
...

<table 
  border="0" cellpadding="0" cellspacing="0"
  summary="Table with CSS borders">
<tr>
  <td>Left Cell</td>
  <td class="middle">Middle Cell</td>
  <td>Right Cell</td>
</tr>
</table>

1. The overall table has a green background and a ridged, lavender border.
2. Ordinary table cells have a yellow background, ten pixels of padding, five pixels of border-spacing (i.e. cellspacing), and a blue, dotted border.
3. Table cells with class="middle" have an extra fifteen pixels of padding to the right and a red, solid border.

Note that some modern browsers still don't support the border-spacing attribute. If you're using one of these browsers, all three cells will be adjacent to each other, and you will not see the green background of the table itself. Again, the solution is to use CSS to do your primary styling, and the table attributes for backup.

The result is garish to say the least; presumably your tables will be far more subdued and tasteful.

Further Reading

• The HTML4.01 Specification: Tables. The defining document for HTML tables. In particular, see the <table> tag and the <th> and <td> tags.

• The CSS2 Specification: Tables. Learn how to style your tables.