Javascript Reference - HTML DOM Style captionSide Property

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

Browser Support


`captionSide`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the captionSide property:

var v = object.style.captionSide

Set the captionSide property:

object.style.captionSide='top|bottom|initial|inherit'

Property Values

Value	Description
top	Puts the caption above the table. This is default
bottom	Puts the caption below the table
inherit	Inherit the caption-side property from the parent element

Technical Details

Default Value:	top
Return Value:	A string representing the position of the table caption
CSS Version	CSS2

Example

The following code shows how to move the table caption to the bottom of the table.


<!DOCTYPE html>
<html>
<head>
<style> 
table, th, td {<!--from   w w w. jav  a2 s. c  o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<table>
  <caption id="myCap">Table 1.1 this is a test</caption>
  <tr>
    <th>Item 1</th>
    <th>Item 2</th>
    <th>Item 3</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>

</table>

<script>
function myFunction() {
    document.getElementById("myCap").style.captionSide = "bottom";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the table caption.


<!DOCTYPE html>
<html>
<head>
<style> 
table, th, td {<!-- w  ww .  jav a  2  s.  c o  m-->
    border: 1px solid black;
    margin: 10px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<table>
  <caption id="myCap" style="caption-side:bottom;">Table 1.1 this is a test</caption>
  <tr>
    <th>Item 1</th>
    <th>Item 2</th>
    <th>Item 3</th>
  </tr>
</table>

<script>
function myFunction() {
    console.log(document.getElementById("myCap").style.captionSide);
}
</script>

</body>
</html>

The code above is rendered as follows: