Easy Tutorial
❮ Prop Style Bordercolor Prop Option Index ❯

captionSide Property


Definition and Usage

The captionSide property sets or returns the position of the table caption.

Syntax

Set the captionSide property:

Return the captionSide property:

Value Description
top Default. Positions the table caption above the table.
bottom Positions the table caption below the table.
inherit The value of the captionSide property is inherited from the parent element.

Browser Support

All major browsers support the captionSide property.

Note: IE7 and earlier versions do not support the captionSide property. IE8 only supports captionSide if !DOCTYPE is specified. IE9 supports the captionSide property.


Example

Move the table caption to the bottom of the table:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("myCap").style.captionSide="bottom";
}
</script>
</head>
<body>

<table border="1">
<caption id="myCap">My savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$150</td>
      </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Move Table Caption</button>

</body>
</html>

❮ Prop Style Bordercolor Prop Option Index ❯