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

align property (hr, iframe, marquee, table)

A A

Font size

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:

middle|center

Aligns the table to the center of the document.

left

Aligns the table to the left of the document.

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="1" 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="1" 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>
        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="1" style="width:200px;" align="center">
        <tr>
            <td>First cell.</td>
            <td>Second cell.</td>
        </tr>
    </table>
    <br /><br /><br />
    <select id="mySelect" onClick="ChangeAlign (this);" size="3">
        <option selected="selected" />center
        <option />left
        <option />right
    </select>
</body>