HTML | DOM Table width Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Before Clicking the Button:

After Clicking the Button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Before Clicking the Button:

After Clicking the Button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.