9.3: Table Captioning

The <caption> Tag

You can caption a table by coding a <caption> tag immediately following the <table> tag. Enter a table title between the opening and closing <caption> tags and the title displays centered over the table. The caption is displayed in the page default font style and size, and formatting is applied with style sheets as is done in the following code example for the table appearing in Figure 8.13.

This is My Table

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

 

Figure \(\PageIndex{1}\): A table with a caption.

<style type="text/css">
  table         {border:outset 3px;}
  table td      {border:inset 1px;}
  table caption {font:bold 10pt arial;}
</style>

<table>
  <caption>This is My Table</caption>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>
</table>
    

Figure \(\PageIndex{2}\): Code for a table with a caption.

 

You can apply styling to the caption through a caption selector. In this example, font styling is applied with the shorthand font notation,

font:style variant weight size family

The caption is centered by default. The text-align property can be applied to the caption to align it with the left or right edge of the table.

Captions appear only at the top of the table. Style sheet standards propose the caption-side:top|bottom|left|right style declaration for positioning captions; however, this property has not been implemented in current browsers.

The <th> Tag

Column headings can be supplied with <th> tags in place of <td> tags enclosing cell contents. The <th> tag automatically centers and bolds the enclosed text. Additional styles can be applied to the tags for additional formatting. Notice in the following example that the th selector is added to the style sheet for borders surrounding these cells.

This is My Table

Column 1	Column 2	Column 3
Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

 

Figure \(\PageIndex{3}\): Using the <th> tag for column headings.

<style type="text/css">
  table         {border:outset 3px; border-collapse:collapse;}
  table td, th  {border:inset 1px;}
  table caption {font:bold 10pt arial;}
</style>

<table>
  <caption>This is My Table</caption>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>
</table>
    

Figure \(\PageIndex{4}\): Code to produce column headings for a table.

The <th> tag is unique only in that it provides default bold and centered styling for its contents. With style sheets, however, this tag becomes redundant since this same styling can be applied without using this special tag. The following table duplicates the previous table without <th> tags simply by identifying and styling the first row of the table.

This is My Table

Column 1	Column 2	Column 3
Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

 

Figure \(\PageIndex{5}\): Producing column headings by styling a row.

<style type="text/css">
  table         {border:outset 3px; border-collapse:collapse;}
  table tr#HEAD {font:bold; text-align:center;}
  table td      {border:inset 1px;}
  table caption {font:bold 10pt arial;}
</style>

<table>
  <caption>This is My Table</caption>
    <tr id="HEAD">
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Cell 1.1</td>
    <td>Cell 1.2</td>
    <td>Cell 1.3</td>
  </tr>
  <tr>
    <td>Cell 2.1</td>
    <td>Cell 2.2</td>
    <td>Cell 2.3</td>
  </tr>
  <tr>
    <td>Cell 3.1</td>
    <td>Cell 3.2</td>
    <td>Cell 3.3</td>
  </tr>
</table>
    

Figure \(\PageIndex{6}\): Code to produce column headings by styling a row.

The contextual selector tr#HEAD td indicates styling for td tags that appear inside a tr tag with id="HEAD". It is your choice whether to use the th tag to take advantage of its inherent styling or to manage all styling through style sheets. As a general rule, the fewer tag to deal with the better.

---

Deprecated Caption align Attribute

Captions can appear at the top or bottom of a table using the align="top" (default) or align="bottom" attribute of the <caption> tag.

Top Table Caption

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

e.g., <caption align="top">Top Table Caption</caption>
 

Bottom Table Caption

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

e.g., <caption align="bottom">Bottom Table Caption</caption>

As noted above, style sheet standards propose the caption-side property to replace the align attribute; however, this property has not been implemented in current browsers.