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>
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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content