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

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

align property (caption, legend)

Browser support:

Sets or retrieves the alignment of a caption and legend element relative to a table or fieldset element.

This property is deprecated in HTML 4.01.

In Internet Explorer earlier than version 8, use the vAlign property to align a caption element to the top or bottom side of a table element.
In Firefox, Opera, Google Chrome, Safari and in Internet Explorer from version 8, use the captionSide style property instead.

Syntax:

object.align;

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

This property is read/write.

HTML page for this property: align

Possible values:

String that sets or retrieves the type of alignment.

One of the following values:

bottom

Aligns to the bottom-center.

center

Aligns to the center. Same as middle.

left

Aligns to the left.

middle

Aligns to the center. Same as center.

right

Aligns to the right.

top

Aligns to the top-center.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the align attribute:

<table border="1px">
    <caption align="right">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:

Recommendation:

<table border="1px">
    <caption style="text-align:center;">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 3:

Cross-browser solution to align to the top or bottom:

<table border="1px">
    <caption align="bottom" style="caption-side: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 4:

This example illustrates the use of the align property:

<head>
    <script type="text/javascript">
        function ChangeAlign (selectTag) {
            var table = document.getElementById ("myTable");

            if ('align' in table.caption) {
                // Internet Explorer
                table.caption.align = selectTag.value;
            } else {
                table.style.captionSide = selectTag.value;
            }
        }
    </script>
</head>
<body>
    <table id="myTable" border="1px">
        <caption align="right">Fruits</caption>
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    <br /><br /><br />
    <select id="mySelect" onchange="ChangeAlign (this);" size="5">
        <option value="bottom" />bottom
        <option value="center" />center
        <option value="left" />left
        <option value="right" selected="selected">right
        <option value="top" />top
    </select>
</body>