captionSide Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:captionSide

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. captionSide

Description

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

Property Values

Value Description
top Default. Place the table caption above the table
bottom Place the table caption below the table
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: top
Return Value: A String, representing the position of the table caption
CSS VersionCSS2

Get the table caption of the table:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    margin: 10px;
}
</style>/*from w  w w  . j  a  v a2s.  c  o m*/
</head>
<body>

<button onclick="myFunction()">Test</button>

<table>
  <caption id="myCap" style="caption-side:bottom;">Table 1.1 Customers</caption>
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Mobile</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Phone</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Edith</td>
    <td>Email</td>
    <td>Mexico</td>
  </tr>
</table>

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

</body>
</html>

Related Tutorials