No Login Data Private Local Save

caption‑side CSS Property Demo - Online Table Caption Position

18
0
0
0

CSS caption-side Demo

Interactive tool to explore how caption-side property positions HTML table captions. Choose a value to see real-time preview and copy ready-to-use CSS.

Live preview updates instantly
Preview caption-side: top
🍎 Monthly Sales Report
ProductPriceUnits Sold
Apples$1.20340
Oranges$0.95210
Bananas$0.80490
Grapes$2.10150
table { caption-side: top; }

Frequently Asked Questions

caption-side defines the placement of a table’s <caption> element. The caption can be positioned at the top, bottom, or logical sides of the table, depending on text direction and writing mode.

  • top – caption above the table (default)
  • bottom – caption below the table
  • block-start – logical start of block axis (like top in horizontal-tb modes)
  • block-end – logical end of block axis
  • inline-start – logical start of inline axis
  • inline-end – logical end of inline axis

Logical values (block-start, block-end, inline-start, inline-end) respect the table’s writing mode. For example, with writing-mode: vertical-rl, block-start places the caption on the right side of the table.

Yes, caption-side is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Logical values are widely supported as well, though some very old browsers may only recognize top and bottom.

No, caption-side is not an animatable property. Changes are applied instantly without transition effects.

Screen readers announce the caption regardless of its visual position. However, placing the caption at the bottom might confuse sighted users expecting it at the top. Choose a position that maintains a logical reading order.
🔧 Related Tools