Table caption placement in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Where does the caption appear in this Bootstrap table?

Given this Bootstrap table code, where will the caption appear visually in the browser?

Bootsrap

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

A Below the table, centered

B Above the table, aligned to the left

C Inside the first row of the table header

D Floating on the right side of the table

💡 Hint

Think about the default position of the element in HTML tables.

By default, the element appears above the table and is left-aligned in Bootstrap tables unless styled otherwise.

❓ selector

intermediate

Which CSS selector targets the table caption in Bootstrap?

You want to style the caption text of a Bootstrap table. Which CSS selector correctly targets the caption element?

A table.caption

B caption

C .table-caption

D table > caption

💡 Hint

Remember the caption is a child element of the table.

The selector 'table > caption' targets caption elements that are direct children of a table, which is the correct way to style table captions.

🧠 Conceptual

advanced

What is the effect of placing inside in a Bootstrap table?

Consider this HTML snippet:

Quarterly Report

Q1	Q2
100	150

What happens to the caption placement and rendering?

A The caption appears inside the table header row

B The caption appears above the table as usual

C The caption is ignored and not displayed

D The browser throws a syntax error and does not render the table

💡 Hint

Check HTML specification for allowed children of .

The element must be a direct child of . Placing it inside is invalid HTML, so browsers ignore it and do not display the caption.

❓ layout

advanced

How to place a Bootstrap table caption below the table?

You want the caption text to appear below the table instead of above it. Which CSS rule achieves this?

A caption { caption-side: bottom; }

B caption { position: absolute; bottom: 0; }

C table { caption-position: bottom; }

D caption { float: bottom; }

💡 Hint

There is a CSS property specifically for caption placement.

The CSS property 'caption-side' controls caption placement. Setting it to 'bottom' moves the caption below the table.

❓ accessibility

expert

Which ARIA role improves accessibility for a table caption in Bootstrap?

To make the table caption more accessible for screen readers, which ARIA role or attribute should you add to the

element?

A role="heading" aria-level="3"

B role="caption"

C aria-label="table caption"

D role="banner"

💡 Hint

Think about how screen readers identify headings inside content.

Adding role="heading" with an aria-level (like 3) to the caption helps screen readers treat it as a heading, improving navigation and clarity.