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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > align (hr, iframe, marquee, table)

align property (hr, iframe, marquee, table)

Browser support:

Sets or retrieves the horizontal alignment of an object relative to its parent.

This property is deprecated. Use the verticalAlign 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:

center

Aligns the table to the center of the document. Same as middle.

left

Aligns the table to the left of the document.

middle

Aligns the table to the center of the document. Same as center.

right

Aligns the table to the right of the document.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the align attribute:

The following table is aligned to the center:
<table border="1px" style="width:200px;" align="center">
    <tr>
        <td>First cell.</td>
        <td>Second cell.</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<div style="text-align:center;">
    <table border="1px" style="width:200px; text-align:left;">
        <tr>
            <td>First cell.</td>
            <td>Second cell.</td>
        </tr>
    </table>
</div>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the align property:

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

            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

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

            table.align = alignType;
        }
    </script>
</head>
<body>
    <table id="myTable" border="1px" style="width:200px;" align="center">
        <tr>
            <td>First cell.</td>
            <td>Second cell.</td>
        </tr>
    </table>
    <br /><br /><br />
    <select id="mySelect" onchange="ChangeAlign (this);" size="3">
        <option selected="selected" />center
        <option />left
        <option />right
    </select>
</body>