What is Table caption placement in Bootsrap?

Bootsrapmarkup~5 mins

Table caption placement in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Table captions help describe what the table is about. Placing captions correctly makes tables easier to understand and more accessible.

When you want to give a clear title or description to a table on a webpage.

When you want screen readers to announce the table's purpose to users with visual impairments.

When you want to improve the overall accessibility and clarity of your data presentation.

When you want to follow good HTML and Bootstrap practices for tables.

When you want to style captions differently using Bootstrap classes.

Syntax

Bootsrap

<table class="table">
  <caption>Caption text here</caption>
  <!-- table rows and cells -->
</table>

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

Bootstrap styles the caption by default to appear above the table with some spacing.

Examples

This example shows a simple table with a caption placed above it.

Bootsrap

<table class="table">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>$1000</td></tr>
  </tbody>
</table>

Using Bootstrap's caption-top class places the caption above the table.

Bootsrap

<table class="table caption-top">
  <caption>Top 5 Products</caption>
  <tbody>
    <tr><td>Product A</td></tr>
  </tbody>
</table>

Using Bootstrap's caption-bottom class places the caption below the table.

Bootsrap

<table class="table caption-bottom">
  <caption>Summary Data</caption>
  <tbody>
    <tr><td>Data 1</td></tr>
  </tbody>
</table>

Sample Program

This page shows three tables with captions placed in different positions using Bootstrap classes. The first table uses the default caption placement above the table. The second uses caption-top to explicitly place the caption above. The third uses caption-bottom to place the caption below the table.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Table Caption Placement</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <h1>Table Caption Placement Example</h1>

    <section>
      <h2>Caption Above (default)</h2>
      <table class="table">
        <caption>Fruits and Prices</caption>
        <thead>
          <tr><th>Fruit</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr><td>Apple</td><td>$1.00</td></tr>
          <tr><td>Banana</td><td>$0.50</td></tr>
        </tbody>
      </table>
    </section>

    <section>
      <h2>Caption Above with <code>caption-top</code></h2>
      <table class="table caption-top">
        <caption>Vegetables and Prices</caption>
        <thead>
          <tr><th>Vegetable</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr><td>Carrot</td><td>$0.80</td></tr>
          <tr><td>Broccoli</td><td>$1.20</td></tr>
        </tbody>
      </table>
    </section>

    <section>
      <h2>Caption Below with <code>caption-bottom</code></h2>
      <table class="table caption-bottom">
        <caption>Drinks and Prices</caption>
        <thead>
          <tr><th>Drink</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr><td>Water</td><td>$0.30</td></tr>
          <tr><td>Juice</td><td>$1.50</td></tr>
        </tbody>
      </table>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always put the <caption> tag as the first child inside the <table> for proper HTML structure.

Bootstrap provides caption-top and caption-bottom classes to control caption placement easily.

Captions improve accessibility by giving screen readers a clear description of the table.

Summary

Use the <caption> tag inside tables to add descriptive titles.

Bootstrap styles captions and lets you place them above or below with classes.

Proper caption placement helps all users understand your tables better.