Where does the caption tag go in a table?

Place caption immediately after the opening table tag, before thead, tbody, tr, th, or td elements. Only one caption is allowed per table.

Is the align attribute on caption still valid?

No. The align attribute on caption is obsolete in HTML5. Use CSS caption-side: top or caption-side: bottom instead.

How do I style a table caption?

Target the caption element with CSS for font-weight, color, and caption-side. Example: caption { font-weight: bold; caption-side: top; }

Why are captions important for accessibility?

Screen readers announce the caption with the table, giving context to users who cannot see the visual layout. Every data table should have a meaningful caption.

HTML <caption> Tag

Q: What is the HTML caption tag used for?

The caption element provides a title or description for an HTML table. It helps users and screen readers understand what the table data represents.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Tables

HTML caption tag tutorial — table titles and accessibility

Overview

What You’ll Learn

By the end of this tutorial, you’ll add accessible table titles with proper placement and CSS styling.

Caption Syntax

Place <caption> as the first child inside <table>.

Placement Rules

One caption per table, before thead, tbody, or row cells.

CSS Positioning

Use caption-side: top or bottom instead of obsolete align.

Accessibility

Screen readers announce captions with table data for context.

Descriptive Titles

Write concise labels like “Monthly Sales Data” instead of “Table 1”.

Production Tips

Pair captions with thead and scope for full table accessibility.

Fundamentals

What Is the `<caption>` Tag?

The caption element (<caption>) labels an HTML table with a short, descriptive title. Browsers display it above or below the table (top by default). Each table may have only one caption.

💡

First child of table

Place <caption> immediately after <table>, before any thead, tbody, tr, th, or td elements.

Captions help all users—including screen reader users—understand what a table shows before reading the cell data.

Foundation

📝 Syntax

Place <caption> right after the opening <table> tag:

syntax.html

<table>
  <caption>Your Table Caption Here</caption>
  <thead>
    <tr><th scope="col">Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Syntax Rules

Only one <caption> per <table>.
Must be the first child of the table element.
Caption text can include inline elements like <strong> or <em>.
Do not use the obsolete align attribute—use CSS caption-side instead.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
Basic caption	`<caption>Sales Data</caption>`	Table title above data
Caption on top	`caption-side: top;`	Default position
Caption on bottom	`caption-side: bottom;`	Footnote-style label
Bold caption	`caption { font-weight: 600; }`	Emphasized title
With thead	`<th scope="col">`	Accessible column headers
Avoid	`align="top"` on caption	Obsolete in HTML5

Reference

🧰 Attributes

The <caption> element has no required tag-specific attributes in HTML5:

align Obsolete

Do not use. Was used for top/bottom placement. Replace with CSS caption-side.

/* use caption-side instead */

class Global

CSS hook for typography, color, and spacing on the caption text.

class="table-title"

id Global

Unique identifier for styling or scripting the caption element.

id="sales-caption"

caption-side CSS

CSS property to position caption above (top) or below (bottom) the table.

caption-side: bottom;

Global attrs Optional

title, lang, and ARIA attributes apply when needed.

lang="en"

Content model Text

Phrasing content only—plain text or inline elements inside the caption.

Monthly Sales Data

Style captions with the caption CSS selector or a class on the element.

Hands-On

Examples Gallery

Table caption patterns with copy-ready code, live previews, and hands-on practice.

Live Preview

A table with a caption at the top:

Monthly Sales Data
Month	Sales
January	$1,000
February	$1,500

Basic Table Caption

A simple table with a caption describing its content.

basic-caption.html

<table>
  <caption>Employee Contact List</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>25</td></tr>
    <tr><td>Mary</td><td>30</td></tr>
  </tbody>
</table>

Try It Yourself

Employee Contact List
Name	Age
John	25
Mary	30

📚 Common Use Cases

Use <caption> for data tables, pricing comparisons, schedules, and any tabular content that needs a clear title or summary.

Monthly Sales Data

Give data tables meaningful context with a descriptive caption.

sales-caption.html

<table>
  <caption>Monthly Sales Data</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$1,000</td></tr>
    <tr><td>February</td><td>$1,500</td></tr>
  </tbody>
</table>

Try It Yourself

Styled Caption with CSS

Apply CSS to the caption selector for typography and spacing.

styled-caption.css

caption {
  font-weight: 700;
  font-size: 1.1rem;
  color: #0f172a;
  caption-side: top;
  padding: 0.5rem 0;
}

Try It Yourself

Caption at Bottom

Use caption-side: bottom for footnotes or data source notes below the table.

caption-bottom.css

caption {
  caption-side: bottom;
  font-size: 0.875rem;
  color: #64748b;
}

Try It Yourself

Data source: Internal records, 2026
Region	Total
North	$4,200

Design

Styling <caption> with CSS

Position and style table captions with the caption selector and caption-side:

caption-side: top Default position

caption-side: bottom Footnote style

font-weight Emphasize title

color / padding Visual polish

caption-styles.css

/* Table caption styling */
caption {
  caption-side: top;
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
  padding: 0.5rem 0;
  text-align: left;
}

.table-footnote caption {
  caption-side: bottom;
  font-size: 0.875rem;
  color: #64748b;
}

Live styled table caption

Quarterly Revenue Summary
Quarter	Revenue
Q1	$12,400

A11y

♿ Accessibility

Captions are essential for accessible tables:

Every data table needs a caption — or an adjacent heading that describes it.
Screen readers announce captions — users hear the table title before cell content.
Be descriptive — “Monthly Sales Data” is better than “Table 1”.
Use thead and scope — pair captions with proper th scope="col" headers.

🧠 How <caption> Works

Author adds caption inside table

Place caption as the first child of table.

Markup

Browser renders the title

Caption appears above or below the table based on caption-side.

Display

Assistive tech reads the label

Screen readers associate the caption with the table for context.

Accessibility

Clear, accessible tables

Users understand what each table contains before reading the data.

Compatibility

Universal Browser Support

The <caption> element is supported in all browsers, including Internet Explorer.

✓ Baseline · Since HTML 4

Table titles that work everywhere

From legacy Internet Explorer to the latest mobile browsers — the caption element is one of the most universally supported table features.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<caption> tag 100% supported

Bottom line: Ship accessible tables with confidence. The <caption> element is safe to use in every production environment today.

Wrap Up

Conclusion

The <caption> tag is a small but important element for well-structured, accessible tables. Add a concise caption to every data table and style it with CSS caption-side.

Avoid the obsolete align attribute—use modern CSS for positioning and typography instead.

View Examples Gallery Try Sales Table

Pro Tips

💡 Best Practices

✅ Do

Add one caption per data table
Place caption as first child of table
Write concise, descriptive titles
Use CSS caption-side for position

❌ Don’t

Use the obsolete align attribute
Add multiple captions to one table
Use vague labels like “Table 1”
Skip captions on data tables

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<caption>`

Bookmark these before you ship — they’ll make every data table clear and accessible.

Core concepts

📊 01

Table Titles

<caption> provides a descriptive title for HTML tables.

Foundation

⚡ 02

First Child Rule

Must be the first element inside <table>.

Essential

📝 03

One Per Table

Only a single caption is allowed per table element.

Reference

🛠 04

caption-side CSS

Use caption-side: top or bottom for positioning.

Styling

♿ 05

Accessibility Win

Screen readers announce captions with table data.

A11y

🌐 06

align Is Obsolete

Do not use the HTML align attribute—use CSS instead.

Compatibility

❓ Frequently Asked Questions

What is the HTML caption tag used for?

It provides a title or description for a table, helping users understand the table’s purpose.

Where does caption go in a table?

Immediately after <table>, before any thead, tbody, tr, th, or td elements.

Can I use align on caption?

No. The align attribute is obsolete. Use CSS caption-side: top or caption-side: bottom.

How many captions can a table have?

Exactly one. If you need more text, use a paragraph below the table or a footnote with caption-side: bottom.

Are captions required for accessibility?

Every data table should have a caption or an equivalent nearby heading that describes the table content.

Build Accessible Tables

Practice table captions with real data in the Try It editor.

Try caption tag →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML canvas Tag HTML center Tag

HTML <caption> Tag

What You’ll Learn

Caption Syntax

Placement Rules

CSS Positioning

Accessibility

Descriptive Titles

Production Tips

What Is the <caption> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

🧰 Attributes

Examples Gallery

Live Preview

Basic Table Caption

📚 Common Use Cases

Monthly Sales Data

Styled Caption with CSS

Caption at Bottom

Styling <caption> with CSS

♿ Accessibility

🧠 How <caption> Works

Author adds caption inside table

Browser renders the title

Assistive tech reads the label

Clear, accessible tables

Universal Browser Support

Table titles that work everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <caption>

Table Titles

First Child Rule

One Per Table

caption-side CSS

Accessibility Win

align Is Obsolete

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <article> Tag

CSS caption-side

HTML <canvas> Tag

Try Sales Table

Build Accessible Tables

About the author

What Is the `<caption>` Tag?

Six truths every developer should know about `<caption>`