HTML - DOM Style Object tableLayout Property

Quiz

HTML DOM Style Object tableLayout property sets or returns the way table cells, rows, and columns are laid out in an HTML document.

Syntax

Set the tableLayout property:

object.style.tableLayout= "auto | fixed | initial | inherit";

Get the tableLayout property:

object.style.tableLayout;

Property Values

Value	Description
auto	It is the default value which sets width of table and columns on the basis of the widest unbreakable content in the cells. It is sometime slow as it need to access all content before displaying table.
fixed	It sets the column width according to width of the table and columns rather than table cell content. It is comparatively faster than auto as it displays table after the first row is received.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the table layout algorithm used for a table.

Example of HTML DOM Style Object 'tableLayout' Property

The following example sets the table layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object tableLayout Property
    </title>
    <style>
        table, td, th{
            border: 1px solid #04af2f;
        }
        #layout {
            width: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Click to change layout.</p>
    <button onclick="fun()">Change</button>
    <table id="layout">
        <tr>
            <th>Name</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>ABCD</td>
            <td>9876543210</td>
        </tr>
        <tr>
            <td>EFGH</td>
            <td>8976543210</td>
        </tr>
    </table>
    <script>
        function fun(){
            document.getElementById("layout")
                .style.tableLayout="fixed"
        }
    </script>
</body>
</html>

Supported Browsers

Property
tableLayout	Yes 14	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page