In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > vAlign (caption)

vAlign property (caption)

Browser support:

Specifies or returns the vertical position of the caption element within a table.

In other browsers you can use the captionSide style property instead.

Syntax:

object.vAlign;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: vAlign

Possible values:

String that sets or retrieves the vertical position.

One of the following values:

bottom

Caption is at the bottom of the table.

top

Default. Caption is at the top of the table.

Default: top.

Example HTML code 1:

This example illustrates the use of the vAlign attribute:

<table border="1px">
    <caption id="myCaption" valign="bottom">Fruits</caption>
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the vAlign property:

<head>
    <script type="text/javascript">
        function ChangeType (elem) {
            var caption = document.getElementById ("myCaption");
            
            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var vPosition = elem.options[whichSelected].text;

            if ('vAlign' in caption) {
                caption.vAlign = vPosition;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table border="1px">
        <caption id="myCaption" valign="bottom">Fruits</caption>
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    <select onchange="ChangeType (this);" size="2">
        <option selected="selected" />bottom
        <option />top
    </select>
</body>