HTML | DOM Table width Property

Last Updated : 30 May, 2022

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>