Open In App

HTML | DOM Table width Property

Last Updated : 30 May, 2022
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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

Note: This property is not supported by HTML5.

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 value 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. 

html
<!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. 

html
<!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: Supported Browsers:

  • Google Chrome 6.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Apple Safari 5.0
  • Opera 10.6O

Next Article
Article Tags :

Similar Reads