Skip to content
Related Articles

Related Articles

HTML | DOM Table width Property
  • Last Updated : 31 Oct, 2019

The Table width property in HTML DOM is used to set or return the value of the width attribute of a table.

Syntax:

  • It returns the width property of a table.
    tableObject.width;
  • It is used to set the width property of a table.
    tableObject.width ="pixels";

Attribute Values:

  • pixels: It sets the width of a table in terms of pixels.
  • %: It sets the width of table in terms of percentage (%).

Return Values: It returns a numeric aalue which represents the width of the table element.

Note: It is not supported by HTML 5.



Example 1: This example returns the width property of a table.




<!DOCTYPE html> 
<html
  
<head
    <title
        HTML DOM table width Property 
    </title
</head
  
<body
    <h1>GeeksforGeeks</h1
  
    <h2>HTML DOM table width Property</h2
  
    <table border="1" id = "gfg" width="250"
        <tr
            <th>NAME</th
            <th>AGE</th
            <th>BRANCH</th
        </tr
        <tr
            <td>BITTU</td
            <td>22</td
            <td>CSE</td
        </tr
    </table
      
    <br><br>
      
    <button ondblclick="thead()"
        Return width
    </button
      
    <p id="sudo"></p>
  
    <script
        function thead() { 
            var x = 
            document.getElementById("gfg").width;
              
            document.getElementById("sudo").innerHTML
                        = x;
        
    </script
</body
  
</html>

Before Clicking the Button:

After Clicking the Button:

Example 2: This example sets the width property of a table.




<!DOCTYPE html> 
<html
  
<head
    <title
        HTML DOM table width Property 
    </title
</head
  
<body
    <h1>GeeksforGeeks</h1
  
    <h2>HTML DOM table width Property</h2
  
    <table border="1" id = "gfg" width="250"
        <tr
            <th>NAME</th
            <th>AGE</th
            <th>BRANCH</th
        </tr
        <tr
            <td>BITTU sehgl</td
            <td>22</td
            <td>CSE</td
        </tr
    </table
      
    <br><br>
      
    <button ondblclick="thead()"
        Return width
    </button>
      
    <br> <br>
  
    <p id="sudo"></p>
  
    <script
        function thead() { 
            var x = document.getElementById("gfg").width
                        = "350";
              
            document.getElementById("sudo").innerHTML
                    = "The width ws set to" + x;
        
    </script>
</body
  
</html>

Before Clicking the Button:

After Clicking the Button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :