Table caption placement in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a caption above the table using Bootstrap.

Bootsrap

<table class="table">
  [1] Caption text here
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

A<tfoot>

B<thead>

C<caption>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of for the caption.

Placing the caption inside a

which is invalid inside a table.

The element is used to add a caption to a table, and it appears above the table by default.

2fill in blank

medium

Complete the code to place the caption below the table using Bootstrap classes.

Bootsrap

<table class="table">
  <caption class="[1]">Caption below the table</caption>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-bottom

Bcaption-top

Ctext-center

Dtable-footer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-top' which places caption above the table.

Using unrelated classes like 'text-center' which only centers text.

Bootstrap provides the class 'caption-bottom' to place the caption below the table.

3fill in blank

hard

Fix the error in the code to correctly add a caption above the table with Bootstrap.

Bootsrap

<table class="table">
  [1] Caption text
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

A<span>

B<div>

C<header>

D<caption>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or instead of inside the table.

Placing caption outside the table element.

Only the tag is valid inside a table to add a caption; other tags cause errors or invalid HTML.

4fill in blank

hard

Fill both blanks to create a table with a caption below and a header row.

Bootsrap

<table class="table">
  <caption class="[1]">Table caption</caption>
  <thead>
    <tr><th>[2]</th></tr>
  </thead>
  <tbody>
    <tr><td>Content</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-bottom

Bcaption-top

CName

DTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-top' which places caption above instead of below.

Using unrelated header text that doesn't fit the table context.

The class 'caption-bottom' places the caption below the table, and 'Name' is a valid header text.

5fill in blank

hard

Fill all three blanks to create a table with a caption above, a header, and a footer.

Bootsrap

<table class="table">
  <caption class="[1]">[2]</caption>
  <thead>
    <tr><th>ID</th></tr>
  </thead>
  <tfoot>
    <tr><td>[3]</td></tr>
  </tfoot>
  <tbody>
    <tr><td>001</td></tr>
  </tbody>
</table>

Drag options to blanks, or click blank then click option'

Acaption-top

BUser List

CEnd of table

Dcaption-bottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'caption-bottom' for caption above the table.

Putting header text in the footer cell.

The class 'caption-top' places the caption above the table, 'User List' is the caption text, and 'End of table' is footer text.

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