Table caption placement in Bootsrap - Mini Project: Build & Apply

Table Caption Placement with Bootstrap

📖 Scenario: You are creating a simple webpage that shows a table of monthly sales data. You want to add a caption to the table to describe what the data represents. Using Bootstrap styles, you will place the caption correctly to make the table clear and accessible.

🎯 Goal: Build a Bootstrap-styled table with a caption placed above the table rows, describing the content as "Monthly Sales Data".

📋 What You'll Learn

Use a <table> element with Bootstrap's table class

Add a <caption> element with the exact text "Monthly Sales Data"

Place the caption above the table rows

Use semantic HTML5 elements

Ensure the table is responsive on small screens

💡 Why This Matters

🌍 Real World

Tables with captions are common in reports, dashboards, and data presentations on websites. Proper caption placement improves accessibility and clarity.

💼 Career

Knowing how to use Bootstrap tables with captions and responsive wrappers is essential for front-end developers building professional, accessible web pages.

1

Create the basic Bootstrap table structure

Create a <table> element with the class table. Inside it, add a <thead> with a row containing two headers: Month and Sales. Then add a <tbody> with two rows: first row with January and $1000, second row with February and $1200.

Bootsrap

Hint

Remember to use <thead> for headers and <tbody> for data rows. Use Bootstrap's table class on the <table> tag.

2

Add a caption element with the text

Add a <caption> element inside the <table> with the exact text Monthly Sales Data. Place it as the first child inside the <table>.

Bootsrap

  
  
    
      Month
      Sales
    
  
  
    
      January
      $1000
    
    
      February
      $1200
    
  

Hint

The <caption> tag should be the first child inside the <table> to appear above the rows.

3

Make the table responsive

Wrap the entire <table> inside a <div> with the Bootstrap class table-responsive to make the table scroll horizontally on small screens.

Bootsrap

  
    Monthly Sales Data
    
      
        Month
        Sales
      
    
    
      
        January
        $1000
      
      
        February
        $1200
      
    
  

Hint

Bootstrap's table-responsive class on a wrapping <div> makes tables scroll horizontally on small screens.

4

Add a page container and header

Wrap the responsive table inside a <main> element with the Bootstrap class container. Above the table, add a <h1> heading with the text Sales Report.

Bootsrap

  
  
    
      Monthly Sales Data
      
        
          Month
          Sales
        
      
      
        
          January
          $1000
        
        
          February
          $1200
        
      
    
  

Hint

Use a <main> with class container to center content and add a heading above the table.

Practice

1. Where should the <caption> tag be placed in a Bootstrap table to add a descriptive title?

easy

A. Inside the <tbody> element

B. Outside the <table> element, above the table

C. Directly inside the <table> element, before any <thead> or <tbody>

D. After the closing </table> tag

Solution

1. Step 1: Understand the HTML structure for tables and correct placement

   The <caption> tag must be inside the <table> element to be valid and recognized by browsers. It should come immediately after the opening <table> tag, before <thead> or <tbody>.

2. Final Answer:

   Directly inside the <table> element, before any <thead> or <tbody> -> Option C

3. Quick Check:

   Caption tag inside table = Directly inside the <table> element, before any <thead> or <tbody> [OK]

Hint: Caption must be inside table tag, right after opening [OK]

Common Mistakes:

• Placing caption outside the table
• Putting caption inside tbody
• Adding caption after closing table tag

2. Which Bootstrap class correctly places a table caption below the table?

easy

A. .caption-top

B. .caption-bottom

C. .caption-right

D. .caption-left

Solution

1. Step 1: Recall Bootstrap caption placement classes and identify for bottom placement

   Bootstrap provides .caption-top to place captions above and .caption-bottom to place captions below the table. The class .caption-bottom moves the caption below the table.

2. Final Answer:

   .caption-bottom -> Option B

3. Quick Check:

   Caption below table = .caption-bottom [OK]

Hint: Use .caption-bottom class to move caption below [OK]

Common Mistakes:

• Using .caption-top for bottom placement
• Using non-existent classes like .caption-right
• Not adding any class for placement

3. What will be the visual position of the caption in this Bootstrap table code?

<table class="table">
  <caption class="caption-top">Monthly Sales</caption>
  <thead>
    <tr><th>Product</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>Apples</td><td>100</td></tr>
  </tbody>
</table>

medium

A. Caption is hidden and not visible

B. Caption appears below the table

C. Caption appears inside the first cell

D. Caption appears above the table

Solution

1. Step 1: Check the caption class and Bootstrap placement behavior

   The caption has the class caption-top, which Bootstrap uses to place captions above the table. With caption-top, the caption text "Monthly Sales" will appear visually above the table rows and headers.

2. Final Answer:

   Caption appears above the table -> Option D

3. Quick Check:

   caption-top class = caption above table [OK]

Hint: caption-top means caption above table [OK]

Common Mistakes:

• Confusing caption-top with caption-bottom
• Thinking caption goes inside table cells
• Assuming caption is hidden without class

4. Identify the error in this Bootstrap table caption code:

<table class="table">
  <thead>
    <caption>User Data</caption>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
  </tbody>
</table>

medium

A. Caption tag is incorrectly placed inside the thead element

B. Missing Bootstrap class on caption

C. Table tag is missing a closing tag

D. Caption text should be inside tbody

Solution

1. Step 1: Check caption placement rules and identify error

   The <caption> tag must be a direct child of the <table> element, not inside <thead> or <tbody>. The caption is placed inside <thead>, which is invalid HTML and will cause rendering issues.

2. Final Answer:

   Caption tag is incorrectly placed inside the thead element -> Option A

3. Quick Check:

   Caption must be direct child of table, not inside thead [OK]

Hint: Caption must be direct child of table, not inside thead [OK]

Common Mistakes:

• Placing caption inside thead or tbody
• Forgetting to close table tag
• Assuming caption needs Bootstrap class

5. You want a Bootstrap table caption to appear below the table on small screens but above the table on larger screens. Which approach is best?

hard

A. Place two captions, one with .caption-top and one with .caption-bottom, then hide/show with responsive utilities

B. Use <caption class="caption-top caption-bottom"> and rely on Bootstrap to toggle automatically

C. Use only .caption-top and rely on CSS media queries to move it below

D. Place caption outside the table and use JavaScript to reposition it

Solution

1. Step 1: Understand Bootstrap limitations and best responsive approach

   Bootstrap's .caption-top and .caption-bottom classes do not toggle automatically based on screen size. Place two captions with different classes and use Bootstrap's responsive display classes (like d-none d-sm-block) to show one above on large screens and below on small screens.

2. Final Answer:

   Place two captions, one with .caption-top and one with .caption-bottom, then hide/show with responsive utilities -> Option A

3. Quick Check:

   Use two captions + responsive classes for placement [OK]

Hint: Use two captions with responsive show/hide classes [OK]

Common Mistakes:

• Using both classes on one caption expecting toggle
• Trying to move caption with CSS only
• Placing caption outside table and using JS unnecessarily