Table caption placement in Bootsrap - Browser Rendering Trace

Render Flow - Table caption placement

Read <table>

→Create TABLE node

↓

Read <caption>

→Create CAPTION node as first child

↓

Read <thead>, <tbody>, <tfoot>

→Create respective section nodes

↓

Apply Bootstrap styles

↓

Calculate caption placement

↓

Layout table and caption

↓

Paint and Composite

The browser reads the table and its caption element first, placing the caption above the table by default. Bootstrap styles can adjust caption placement visually by CSS, affecting layout and painting.

Render Steps - 3 Steps

Code Added:<caption>Monthly Sales Report</caption> inside <table>

Before

[TABLE]
  [THEAD]
    [TR][TH Month][TH Sales]
  [TBODY]
    [TR][TD January][TD $1000]

→

After

[CAPTION: Monthly Sales Report]
[TABLE]
  [THEAD]
    [TR][TH Month][TH Sales]
  [TBODY]
    [TR][TD January][TD $1000]

Adding the caption element places a text label above the table by default.

🔧 Browser Action:Creates caption box and inserts it before table content

Code Sample

A Bootstrap styled table with a caption placed below the table, centered and bold.

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>

Bootsrap

.table caption {
  caption-side: bottom;
  text-align: center;
  font-weight: 600;
  padding-top: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, where is the caption placed relative to the table?

A Below the table

B Above the table

C Inside the first table cell

D Hidden from view

Common Confusions - 2 Topics

Why does my caption stay above the table even after setting caption-side: bottom?

Some browsers or Bootstrap versions may override caption-side with other styles or specificity. Check if your CSS is loaded correctly and not overridden.

💡 Always verify CSS specificity and use browser DevTools to confirm caption-side is applied (see render_steps 2).

Why is my caption text not centered even though I set text-align: center?

The caption element is a block-level box by default, so text-align centers inline text inside it. If other styles override text alignment, it won't center.

💡 Use DevTools to inspect computed styles and confirm text-align on caption (see render_steps 3).

Property Reference

Property	Value Applied	Visual Effect	Common Use
caption-side	top	Caption appears above the table	Default caption placement
caption-side	bottom	Caption appears below the table	Place caption under table
text-align	center	Centers caption text horizontally	Improve caption readability
padding-top	0.5rem	Adds space above caption when below table	Separate caption from table visually
font-weight	600	Makes caption text bold	Highlight caption

Concept Snapshot

Table captions label tables visually. Default placement is above the table (caption-side: top). Use caption-side: bottom to place caption below. Center caption text with text-align: center. Add padding to separate caption from table. Bootstrap styles enhance caption appearance.