CSS - caption-side Property

The caption-side property specifies where the table caption should be displayed (top or bottom).

Possible Values

  • top − Places the caption's element box above the table box.

  • bottom − Places the caption's element box below the table box.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.captionSide = "top";

Example

Here is the example showing the usage of this property −

<html>
<head>
<style>
   caption.top {caption-side: top}
   caption.bottom {caption-side: bottom}
</style>
</head>
<body>
   <div>
      <h2>caption-side: top</h2>
      <table style = "width: 400px; border: 2px solid black;">
         <caption class = "top">
            This caption will appear at the top of the table.
         </caption>
         <tr><td >Data 1</td></tr>
         <tr><td >Data 2</td></tr>
      </table>
   </div>
   <div>
   <h2>caption-side: bottom</h2>
      <table style = "width: 400px; border: 2px solid black;">
         <caption class = "bottom">
            This caption will appear at the bottom of the table.
         </caption>
         <tr><td >Data 1</td></tr>
         <tr><td >Data 2</td></tr>
      </table>
   </div>
</body>
</html>
Advertisements