CSS - caption-side


Advertisements


Description

The caption-side property determines the placement of the element box of a table.s caption.

Possible Values

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

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

  • left − Places the caption's element box to the left of the table box.

  • right − Places the caption's element box to the right of the table box.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.captionSide = "left";

Example

Here is the example which shows effect of this property:

<html>
   <head>
   
      <style type="text/css">
         caption.top {caption-side:top}
         caption.bottom {caption-side:bottom}
         caption.left {caption-side:left}
         caption.right {caption-side:right}
      </style>
      
   </head>
   <body>
   
      <table style="width:400px; border:1px solid black;">
         <caption class="top">
         This caption will appear at the top
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="bottom">
         This caption will appear at the bottom
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="left">
         This caption will appear at the left
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      <br />
      
      <table style="width:400px; border:1px solid black;">
         <caption class="right">
         This caption will appear at the right
         </caption>
         <tr><td > Cell A</td></tr>
         <tr><td > Cell B</td></tr>
      </table>
      
   </body>
</html>

This will produce following result −



Advertisements