HTML Table Captions

Because tables are commonly used to present data, we may well want to add a caption to the table, to give the user a bit more information about what the data represents. We could do this using normal text, but the great thing about using the HTML <caption> tag is that the caption becomes directly linked with the table, rather than being a separate element such as some separate paragraph text.

To use the HTML caption tag, we need to insert it within our table tag. It should be the first thing present within our table, like so:

<table>

<caption>This is the caption</caption>

<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>

<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>

</table>

The above code will display as follows:

This is the caption
Cell 1 Cell 2
Cell 3 Cell 4

As you can see, the caption text is positioned above the table and center aligned with it. This is the default behavior, but we can position it wherever we want using CSS, and we can also adjust other properties such as its alignment, and font properties. This is covered later in the CSS Guide.