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>