Skip to content
Related Articles

Related Articles

HTML | DOM Style tableLayout Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 05 Aug, 2022

The DOM Style tableLayout property is used to set or return how a table and its cells, rows, and columns should be laid out. 

Syntax:

  • It returns the tableLayout Property
object.style.tableLayout
  • It used to set the tableLayout Property
object.style.tableLayout = "auto | fixed | initial | inherit"

Return Values: It returns a string value, which represents the table layout algorithm used for a table.

Property Values:

  • fixed: This value is used to set the column width on the basis of the width of the table and irrespective of the content.
  • auto: This value is used to set the width of table and columns on the basis of the widest unbreakable content in the cells. This is the default value.
  • initial: This is used to set this property to its default value.
  • inherit: This inherits the property from its parent.

Example 1: Using the fixed value. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style tableLayout property
    </title>
    <style>
        table,
        td {
            border: 1px solid;
        }
         
        #table1 {
            width: 100%;
        }
    </style>
</head>
<body>
    <h1 style="color: green">
      GeeksforGeeks
      </h1>
    <b>
      DOM Style tableLayout
      </b>
    <table id="table1">
        <tr>
            <td>GeeksforGeeks is a
              computer science portal.</td>
            <td>DOM Style tableLayout</td>
        </tr>
        <tr>
            <td>Article 1</td>
            <td>Article 2</td>
        </tr>
        <tr>
            <td>Article 3</td>
            <td>Article 4</td>
        </tr>
    </table>
    <button onclick="changetableLayout()">
      Change tableLayout
      </button>
    <script>
        function changetableLayout() {
            document.querySelector(
              "#table1").style.tableLayout =
              "fixed";
        }
    </script>
</body>
</html>

Output:
  • Before clicking the button:
 fixed-before
  • After clicking the button:
 fixed-after
Example 2: Using the auto value. 
HTML



<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style tableLayout property
    </title>
    <style>
        table,
        td {
            border: 1px solid;
        }
         
        #table1 {
            width: 100%;
            table-layout: fixed;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
      </h1>
    <b>
      DOM Style tableLayout
      </b>
    <table id="table1">
        <tr>
            <td>GeeksforGeeks is a
              computer science portal.</td>
            <td>DOM Style tableLayout</td>
        </tr>
        <tr>
            <td>Article 1</td>
            <td>Article 2</td>
        </tr>
        <tr>
            <td>Article 3</td>
            <td>Article 4</td>
        </tr>
    </table>
 
    <button onclick="changetableLayout()">
      Change tableLayout
      </button>
    <script>
        function changetableLayout() {
            document.querySelector(
              "#table1").style.tableLayout =
              "auto";
        }
    </script>
</body>
</html>
Output:
  • Before clicking the button:
 auto-before
  • After clicking the button:
 auto-after
Example 3: Using the initial value. 
HTML



<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style tableLayout property
    </title>
    <style>
        table,
        td {
            border: 1px solid;
        }
         
        #table1 {
            width: 100%;
            table-layout: fixed;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
      </h1>
    <b>DOM Style tableLayout</b>
    <table id="table1">
        <tr>
            <td>GeeksforGeeks is a
              computer science portal.</td>
            <td>DOM Style tableLayout</td>
        </tr>
        <tr>
            <td>Article 1</td>
            <td>Article 2</td>
        </tr>
        <tr>
            <td>Article 3</td>
            <td>Article 4</td>
        </tr>
    </table>
    <button onclick="changetableLayout()">
      Change tableLayout
      </button>
    <script>
        function changetableLayout() {
            document.querySelector(
              "#table1").style.tableLayout =
              "initial";
        }
    </script>
</body>
</html>
Output:
  • Before clicking the button:
 initial-before
  • After clicking the button:
 initial-after
Example 4: Using the inherit value. 
HTML



<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style tableLayout property
    </title>
    <style>
        #parent {
            table-layout: fixed;
        }
         
        table,
        td {
            border: 1px solid;
        }
         
        #table1 {
            width: 100%;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
      </h1>
    <b>DOM Style tableLayout</b>
    <div id="parent">
        <table id="table1">
            <tr>
                <td>GeeksforGeeks is a
                  computer science portal.</td>
                <td>DOM Style tableLayout</td>
            </tr>
            <tr>
                <td>Article 1</td>
                <td>Article 2</td>
            </tr>
            <tr>
                <td>Article 3</td>
                <td>Article 4</td>
            </tr>
        </table>
    </div>
 
    <button onclick="changetableLayout()">
      Change tableLayout
      </button>
    <script>
        function changetableLayout() {
            document.querySelector(
              "#table1").style.tableLayout =
              "inherit";
        }
    </script>
</body>
</html>
Output:
  • Before clicking the button:
 inherit-before
  • After clicking the button:
 inherit-after
Supported Browsers: The browser supported by tableLayout property are listed below:
  • Google Chrome 14
  • Edge 12
  • Internet Explorer 5
  • Firefox 1
  • Opera 7
  • Apple Safari 1

My Personal Notes
arrow_drop_up
Next

HTML | DOM classList Property
Recommended Articles
Page :
HTML | DOM Style borderRightColor Property
22, Jan 19
HTML | DOM Style paddingLeft Property
25, Jan 19
HTML DOM | Style pageBreakBefore Property
29, Jan 19
HTML | DOM Style textAlign Property
31, Jan 19
HTML | DOM Style wordWrap Property
25, Mar 19
HTML | DOM Style columnWidth Property
27, Nov 19
HTML | DOM Style textOverflow Property
11, Mar 19
HTML | DOM Style overflow Property
11, Mar 19
HTML | DOM Style overflowY Property
07, Feb 19
HTML | DOM Style overflowX Property
07, Mar 19
HTML | DOM Style marginRight Property
11, Mar 19
HTML | DOM Style objectPosition Property
28, Mar 19
HTML | DOM Style textDecorationStyle Property
28, Jan 19
HTML | DOM Style transitionProperty Property
31, Jan 19
HTML | DOM Style transformStyle Property
06, Feb 19
HTML DOM | Style pageBreakInside Property
29, Jan 19
HTML | DOM Style top Property
25, Jan 19
HTML | DOM Style right Property
24, Jan 19
HTML | DOM Style transitionTimingFunction property
31, Jan 19
HTML | DOM Style order Property
06, Feb 19
HTML | DOM Style userSelect Property
25, Jan 19
HTML | DOM Style perspective Property
20, Feb 19
HTML | DOM Style border Property
22, Jan 19
HTML | DOM Style display Property
01, Feb 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!