HTML - DOM Style Object captionSide Property

Quiz

HTML DOM Style Object captionSide property sets or returns the table caption position.The table caption is only set on vertical position either top and bottom.

Syntax

Set the captionSide property:

object.style.captionSide= "top | bottom | initial | inherit";

Get the captionSide property:

object.style.captionSide;

Property Values

Value	Description
top	It is the default value which sets the table caption at the top of the table.
bottom	It sets the table caption at the bottom of the table.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents position of table caption.

Example of HTML DOM Style Object 'captionSide' Property

The following example sets the table caption to the top and bottom of the table.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object captionSide Property
    </title>
    <style>
        table {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to position the table caption.
    </p>
    <button onclick="funtwo()">Bottom</button>
    <button onclick="fun()">Top</button>
    <br><br><br><br>
    <table id="border" border="1">
        <caption>Table No. 21</caption>
        <tr>
            <td>This is</td>
            <td>is</td>
        </tr>
        <tr>
            <td>an example</td>
            <td>table</td>
        </tr>
        <tr>
            <td>for</td>
            <td>caption side</td>
        </tr>
    </table>
    <script>
        function funtwo() {
            document.getElementById("border")
                .style.captionSide = "bottom";
        }
        function fun() {
            document.getElementById("border")
                .style.captionSide = "top";
        }        
    </script>
</body>
</html>

Supported Browsers

Property
captionSide	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page