Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM Table width Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

My Personal Notes arrow_drop_up
Last Updated : 30 May, 2022
Like Article
Save Article
Similar Reads
Related Tutorials