HTML Table Captions

Understanding HTML Table Captions

The HTML <caption> element provides a title or description that identifies the purpose of a table.

A caption is associated directly with its table, helping readers understand what the table contains before examining its rows and columns.

Table Caption Syntax

A table caption is created with the <caption> element inside the <table> element.

<table>
  <caption>Web Development Courses</caption>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Beginner</td>
  </tr>
</table>

Only one <caption> element is used for a table.

The <caption> Element

The <caption> element identifies or describes the table as a whole rather than an individual row, column, or cell.

<caption>Monthly Website Traffic</caption>

A useful caption gives readers enough information to understand what the table represents without having to determine its purpose from the cell contents alone.

Caption Placement

The <caption> element must be the first child inside the <table> element.

<table>
  <caption>Course Schedule</caption>
  <tr>
    <td>Monday</td>
    <td>HTML</td>
  </tr>
</table>

Keeping the caption within the table markup creates a direct structural relationship between the caption and the data it describes.

Writing a Table Caption

A caption should clearly identify the subject or purpose of the table. Short captions often work well for simple tables, while more complex tables may benefit from additional explanatory text outside the table.

<caption>Website Visitors by Month</caption>

Avoid captions that merely repeat information already obvious from the surrounding content. The caption should help readers understand what the table represents.

Captions and Accessibility

Table captions can improve accessibility by providing an identifiable name and context for tabular data. This can be especially helpful when readers encounter several tables on the same page or navigate content with assistive technology.

A caption does not replace properly marked table headers. Captions identify the table as a whole, while header cells identify the meaning of individual rows or columns.

Changing the Caption Position

Browsers normally display a table caption above the table. CSS can change its visual position without changing where the <caption> element belongs in the HTML.

caption {
  caption-side: bottom;
}

The caption-side CSS property can place the caption at the top or bottom of the table while the HTML <caption> remains the first child of <table>.

HTML Table Caption Example

The following example adds a caption to a simple table. Edit the caption text or remove the <caption> element to see how it affects the table.

Table Caption Best Practices

• Use <caption> when a table benefits from a clear identifying title or description.
• Place <caption> as the first child of the <table> element.
• Use only one <caption> element per table.
• Write caption text that clearly communicates the table's subject or purpose.
• Keep simple captions concise and provide additional explanation outside the table when necessary.
• Do not use a caption as a replacement for table header cells.
• Use CSS when the visual position or appearance of the caption needs to change.

Summary

The HTML <caption> element provides a title or description for a table and is placed as the first child of the <table> element. A meaningful caption helps identify the table and can improve accessibility, while CSS can control its visual appearance and position without changing the table's HTML structure.