How to set HTML Table Width and Height

HTML Table Width

The width attribute specifies the width of a table or the width of a table cell. The width can be set either as an absolute value in pixels, or as in percentage (%). If the width attribute is not set, it will takes up the space of longest single word in each cell.

Table width in pixels

<table border=1 width=100>

Table width in percentage (%)

<table border=1 width=100%>

The width value 100% indicates a width for the table that is the full width of the browser window.

HTML Source Code :

<html>
<body >
  <table border=1 width=100>
    <tr>
      <td>
        Table width is 100 pixel
      </td>
    </tr>
  </table>
  <br>
  <table border=1 width=100%>
    <tr>
      <td>
        Table width is 100 %
      </td>
    </tr>
  </table>
</body>
</html>

The above HTML code display two tables, one is 100 pixel width and another one is 100% width. First table is only 100 pixel width in any changes in browser window state, while other table will always stretch the full width of the window it is viewed in, that is the table automatically expands as the user changes the window size when you set width in % .

Cell Width or Column width

You can set the width of a table cell using width attribute.

<td width=30%>

The < td > width can be set either as an absolute value in pixels, or as in percentage (%).

HTML Source Code :

<html>
<body >
  <table border=1 width=400>
    <tr>
      <td width=30%>
        Cell width is 30%
      </td>
      <td width=70%>
        Cell width is 70%
      </td>
  </tr>
  </table>
</body>
</html>

Note: The width attribute of < td > is deprecated in HTML 4.01.

Table Height

Height attributes can be added to the < table > tag as well as the < td > tag.

<table height=400>

<td height=100>

The height attribute is not recognized by certain browsers, so be sure to do cross browser testing if you are relying on it.