Tables are great for data, but users need to know what the data represents. The <caption> tag defines a title for your table. It is critical for accessibility and context.

We start with a standard <table> tag. A table without a caption is like a book without a title on the cover. It leaves users guessing.

<table>

The <caption> tag must be inserted immediately after the opening <table> tag. It cannot go at the bottom or after a row. This ensures screen readers announce the title first.

<table>
  <caption>Monthly Savings</caption>

Now let's add some data. The caption remains at the top center by default, clearly labeling the information that follows.

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Checkpoint: Where must the <caption> tag be placed?

<table>
  
  <tr>...</tr>
</table>

Here is the result. Notice how the browser centers the caption text above the table columns automatically. It provides a clear, semantic headline.

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Excellent. You've learned how to give your tables meaning. Now it's time to practice writing it yourself.

caption.html

1 / 7

🏷️

TutorTables are great for data, but users need to know what the data represents. The <caption> tag defines a title for your table. It is critical for accessibility and context.

⭐ 0 EXP

Table Mastery

Unlock nodes by mastering table elements.

Concept 1: Container

Data starts with the table tag. It defines the boundary of your tabular data.

System Check

Which tag wraps all table content?

Community Holo-Net

Showcase Your Data

Built a complex data table with accessible captions? Share your semantic HTML examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Tables
and Captions

Pascual Vila

Frontend Instructor

When displaying tabular data, structure is everything. However, visual structure isn't enough. We need to explain what the table represents. This is where the <caption> tag comes in.

What is a Caption?

The <caption> element specifies the title of a table. It is helpful for all users, but especially for those using screen readers, as the caption is often announced before the table data is traversed.

Proper Placement

There is only one correct place for a <caption>: immediately after the opening <table> tag. You can only have one caption per table.

Styling and Behavior

By default, a caption will be centered above the table. However, using CSS property caption-side, you can move it to the bottom if the design requires it.

Table Glossary

<caption>: Defines a table caption. Must be the first child of the table element.
Accessibility: Captions allow assistive technology to identify a table's purpose without reading through the cells.
Scope: While related to th tags, the caption provides the 'scope' or context for the entire dataset.

📖 INDEX