HTML · Tables

Table Captions

Learn to add descriptive titles to HTML tables

Find videos you like?

Save to resource drawer for future reference!

Table Captions

Add descriptive titles to your tables

The <caption> element provides a title or description for a table. It's placed directly after the opening <table> tag and serves as a label for the entire table, improving both accessibility and usability.

Benefits

✓ Describes table purpose
✓ Improves accessibility
✓ Helps screen readers
✓ Provides context
✓ Professional appearance

Basic Syntax

<table>
  <caption>
    Table Description
  </caption>
  <!-- rest of table -->
</table>

Key Point

<caption> must be the first child of the <table> element, before any <thead>, <tbody>, or <tr>.

Basic Caption Example

A simple table with a descriptive caption

The caption appears as a label that describes what the table contains. It's semantically associated with the table and helps users understand the data.

Sales Report with Caption

Table with descriptive caption

Frontend

<h3>Basic Table with Caption</h3>
<table>
  <caption>Annual Sales Report 2024</caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$250,000</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$280,000</td>
      <td>12%</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$315,000</td>
      <td>15%</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$340,000</td>
      <td>8%</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Caption Features and Placement

Style and position captions with CSS

caption-side: top

Default position - caption appears above table

caption {
  caption-side: top;
}

caption-side: bottom

Caption appears below table

caption {
  caption-side: bottom;
}

Styled Captions

Captions positioned at top and bottom

Frontend

<h3>Styled Caption Examples</h3>
<table class="table-bottom">
  <caption class="caption-bottom">Table 1: Student Performance (Bottom Caption)</caption>
  <thead>
    <tr>
      <th>Student</th>
      <th>Math</th>
      <th>Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>95</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
      <td>89</td>
    </tr>
  </tbody>
</table>
<table class="table-top">
  <caption class="caption-top">Table 2: Monthly Sales (Top Caption)</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
      <th>Target</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$15,000</td>
      <td>$12,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$18,000</td>
      <td>$15,000</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Writing Effective Captions

Guidelines for creating descriptive captions

Be Descriptive

Clearly state what the table contains

✓ "Monthly Sales Report 2024"

Keep It Concise

Use clear, short language

✓ "Employee Performance Metrics"

Include Context

Mention time period or department if relevant

✓ "Q1 2024 Customer Feedback"

Use Consistent Style

Match caption style across tables

✓ Title-cased and descriptive

Accessible Captions

Create captions that work well with screen readers

Good captions include both a title and optional description. You can use HTML elements within captions to format them.

Enhanced Caption Structure

<caption>
  <strong>2024 Financial Summary</strong><br>
  <small>Revenue and expenses by department</small>
</caption>

Accessible Financial Table

Table with structured caption and scope attributes

Frontend

<h3>Accessible Table with Caption</h3>
<table>
  <caption>
    <strong>Q1 2024 Financial Summary</strong><br>
    <small>Revenue and expenses breakdown by department</small>
  </caption>
  <thead>
    <tr>
      <th scope="col">Department</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Net</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Sales</th>
      <td>$500,000</td>
      <td>$150,000</td>
      <td>$350,000</td>
    </tr>
    <tr>
      <th scope="row">Marketing</th>
      <td>$300,000</td>
      <td>$200,000</td>
      <td>$100,000</td>
    </tr>
    <tr>
      <th scope="row">Operations</th>
      <td>$200,000</td>
      <td>$180,000</td>
      <td>$20,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$1,000,000</td>
      <td>$530,000</td>
      <td>$470,000</td>
    </tr>
  </tfoot>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use descriptive captions
✓ Place as first table child
✓ Style with CSS
✓ Use with scope attributes
✓ Include context (dates, etc.)

❌ Avoid This

✗ Don't skip captions
✗ Don't use vague titles
✗ Don't place outside table
✗ Don't use align attribute
✗ Don't overload with details

Accessibility Tip

Screen readers announce table captions, making them essential for users with visual impairments to understand table purpose.

When to Use Captions

📊

Reports

Financial or sales reports

📅

Schedules

Class timetables, events

📈

Data Tables

Statistical information

⚙️

Specs

Product specifications

⚖️

Comparisons

Side-by-side features

✓

Results

Survey or test data

Previous Topic

Table Attributes

colspan, rowspan, scope, headers for complex tables and accessibility.

Next Topic

Form Basics

<form> element, action, method (GET/POST), enctype, and form submission.

Ask a Question

Have a question about Table Captions? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Tables

Table Captions

Learn to add descriptive titles to HTML tables

Find videos you like?

Save to resource drawer for future reference!

Table Captions

Add descriptive titles to your tables

Benefits

✓ Describes table purpose
✓ Improves accessibility
✓ Helps screen readers
✓ Provides context
✓ Professional appearance

Basic Syntax

<table>
  <caption>
    Table Description
  </caption>
  <!-- rest of table -->
</table>

Key Point

<caption> must be the first child of the <table> element, before any <thead>, <tbody>, or <tr>.

Basic Caption Example

A simple table with a descriptive caption

The caption appears as a label that describes what the table contains. It's semantically associated with the table and helps users understand the data.

Sales Report with Caption

Table with descriptive caption

Frontend

<h3>Basic Table with Caption</h3>
<table>
  <caption>Annual Sales Report 2024</caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$250,000</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>$280,000</td>
      <td>12%</td>
    </tr>
    <tr>
      <td>Q3</td>
      <td>$315,000</td>
      <td>15%</td>
    </tr>
    <tr>
      <td>Q4</td>
      <td>$340,000</td>
      <td>8%</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Caption Features and Placement

Style and position captions with CSS

caption-side: top

Default position - caption appears above table

caption {
  caption-side: top;
}

caption-side: bottom

Caption appears below table

caption {
  caption-side: bottom;
}

Styled Captions

Captions positioned at top and bottom

Frontend

<h3>Styled Caption Examples</h3>
<table class="table-bottom">
  <caption class="caption-bottom">Table 1: Student Performance (Bottom Caption)</caption>
  <thead>
    <tr>
      <th>Student</th>
      <th>Math</th>
      <th>Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>95</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
      <td>89</td>
    </tr>
  </tbody>
</table>
<table class="table-top">
  <caption class="caption-top">Table 2: Monthly Sales (Top Caption)</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
      <th>Target</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$15,000</td>
      <td>$12,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$18,000</td>
      <td>$15,000</td>
    </tr>
  </tbody>
</table>

Live Preview

Loading preview...

Writing Effective Captions

Guidelines for creating descriptive captions

Be Descriptive

Clearly state what the table contains

✓ "Monthly Sales Report 2024"

Keep It Concise

Use clear, short language

✓ "Employee Performance Metrics"

Include Context

Mention time period or department if relevant

✓ "Q1 2024 Customer Feedback"

Use Consistent Style

Match caption style across tables

✓ Title-cased and descriptive

Accessible Captions

Create captions that work well with screen readers

Good captions include both a title and optional description. You can use HTML elements within captions to format them.

Enhanced Caption Structure

<caption>
  <strong>2024 Financial Summary</strong><br>
  <small>Revenue and expenses by department</small>
</caption>

Accessible Financial Table

Table with structured caption and scope attributes

Frontend

<h3>Accessible Table with Caption</h3>
<table>
  <caption>
    <strong>Q1 2024 Financial Summary</strong><br>
    <small>Revenue and expenses breakdown by department</small>
  </caption>
  <thead>
    <tr>
      <th scope="col">Department</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Net</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Sales</th>
      <td>$500,000</td>
      <td>$150,000</td>
      <td>$350,000</td>
    </tr>
    <tr>
      <th scope="row">Marketing</th>
      <td>$300,000</td>
      <td>$200,000</td>
      <td>$100,000</td>
    </tr>
    <tr>
      <th scope="row">Operations</th>
      <td>$200,000</td>
      <td>$180,000</td>
      <td>$20,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$1,000,000</td>
      <td>$530,000</td>
      <td>$470,000</td>
    </tr>
  </tfoot>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use descriptive captions
✓ Place as first table child
✓ Style with CSS
✓ Use with scope attributes
✓ Include context (dates, etc.)

❌ Avoid This

✗ Don't skip captions
✗ Don't use vague titles
✗ Don't place outside table
✗ Don't use align attribute
✗ Don't overload with details

Accessibility Tip

Screen readers announce table captions, making them essential for users with visual impairments to understand table purpose.

When to Use Captions

📊

Reports

Financial or sales reports

📅

Schedules

Class timetables, events

📈

Data Tables

Statistical information

⚙️

Specs

Product specifications

⚖️

Comparisons

Side-by-side features

✓

Results

Survey or test data

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Table Attributes

Form Basics

HTML Code Editor

Building Your Learning Module...

Table Captions

Benefits

Basic Syntax

Key Point

Sales Report with Caption

caption-side: top

caption-side: bottom

Styled Captions

Be Descriptive

Keep It Concise

Include Context

Use Consistent Style

Enhanced Caption Structure

Accessible Financial Table

✅ Do This

❌ Avoid This

Accessibility Tip

Reports

Schedules

Data Tables

Specs

Comparisons

Results

Table Attributes

Form Basics

HTML Code Editor

Table Captions

Benefits

Basic Syntax

Key Point

Sales Report with Caption

caption-side: top

caption-side: bottom

Styled Captions

Be Descriptive

Keep It Concise

Include Context

Use Consistent Style

Enhanced Caption Structure

Accessible Financial Table

✅ Do This

❌ Avoid This

Accessibility Tip

Reports

Schedules

Data Tables

Specs

Comparisons

Results