Loading...

Columns and rows, and tables themselves, are informative and organized in large part due to labeling them.

If you are presented with a table with a dozen cells of data, but no indication as to what the columns or rows represent, the information isn’t all that useful. And if you look at a table as a whole, you may ask yourself what the data is for or what was the source of the data? This is where table captions and table headers come in.

In HTML, a table caption can be created with the <caption> tag. This tag is placed between the opening <table> tag and the first opening <tr> tag. By default, the text that is placed within this tag will display directly above the table, aligned to the center.

Table with a caption.

<table border="1">
<caption>This is the table's caption.</caption>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
</table>

This is the table's caption.
Row 1, Column 1Row 1, Column 2

Now that we know what the table is all about, we can add more information by adding headers to the row or columns (or both). A table header functions similarly to a regular table data cell, except it serves as the categorical label for its row or column. It also has a default styling of appearing in bold font and a centered alignment. To establish a table data cell as a header, just use the <th> tag instead of <td>.

The previous table with column headers added.

<table border="1">
<caption>This is the table's caption.</caption>
<tr>
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
</table>

This is the table's caption.
Column Header 1 Column Header 2
Row 1, Column 1Row 1, Column 2

Click through the slideshow below to see an example of how these tags improve the informational value of a table.

No Headers or Caption

<table border="1">
<tr>
<td>Republican</td>
<td>42</td>
<td>47</td>
<td>37</td>
</tr>
<tr>
<td>Independent</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>Democratic</td>
<td>42</td>
<td>37</td>
<td>46</td>
</tr>
</table>
Republican 42 47 37
Independent 13 13 13
Democratic 42 37 46

Let's look at this table. You can assume the first column is related to political parties. But then we have a bunch of numbers. What do they mean? What do they measure? We need to label these columns for this table to be of any use.

Headers Added, but No Caption

<table border="1">
<tr>
<th>Colorado Adults</th>
<th>All adults (%)</th>
<th>Men (%)</th>
<th>Women (%)</th>
</tr>
<tr>
<td>Republican</td>
<td>42</td>
<td>47</td>
<td>37</td>
</tr>
<tr>
<td>Independent</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>Democratic</td>
<td>42</td>
<td>37</td>
<td>46</td>
</tr>
</table>
Colorado Adults All adults (%) Men (%) Women (%)
Republican 42 47 37
Independent 13 13 13
Democratic 42 37 46

With the column headers added, this data actually means something. But what was the main purpose of the data? Where did it come from?

Caption Added

<table border="1">
<caption>Party Identification by Gender in Colorado According to Gallup Daily Tracking Jan.1-Jun.30, 2014</caption>
<tr>
<th>Colorado Adults</th>
<th>All adults (%)</th>
<th>Men (%)</th>
<th>Women (%)</th>
</tr>
<tr>
<td>Republican</td>
<td>42</td>
<td>47</td>
<td>37</td>
</tr>
<tr>
<td>Independent</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>Democratic</td>
<td>42</td>
<td>37</td>
<td>46</td>
</tr>
</table>
Party Identification by Gender in Colorado According to Gallup Daily Tracking Jan.1-Jun.30, 2014
Colorado Adults All adults (%) Men (%) Women (%)
Republican 42 47 37
Independent 13 13 13
Democratic 42 37 46

Now, with a caption added as well, this table is much more useful.