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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > align (div, Hn, p, td, tr, ...)

align property (div, Hn, p, td, tr, ...)

Browser support:

Sets or retrieves the horizontal alignment of the contents in an object.

This property is deprecated. Use the textAlign 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 to the center of the available space. Same as middle.

justify

Aligns to the left and right edges.

left

Default. Aligns to the left edge.

middle

Aligns to the center of the available space. Same as center.

right

Aligns to the right edge.

Default: left.

Example HTML code 1:

This example illustrates the use of the align attribute:

<table border="1px" style="width:400px;">
    <tr>
        <td align="center">Contents are aligned to the center.</td>
    </tr>
    <tr>
        <td align="left">Contents are aligned to the left</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<table border="1px" style="width:400px;">
    <tr>
        <td style="text-align:center;">Contents are aligned to the center.</td>
    </tr>
    <tr>
        <td style="text-align:left;">Contents are aligned to the left</td>
    </tr>
</table>

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.rows[0].cells[0].align = alignType;
        }
    </script>
</head>
<body>
    <table id="myTable" border="1px" style="width:400px;">
        <tr>
            <td align="center">This cell is aligned.</td>
            <td align="center">A normal cell.</td>
        </tr>
    </table>

    <select id="mySelect" onchange="ChangeAlign (this);" size="4">
        <option selected="selected">center
        <option />left
        <option />right
    </select>
</body>