Widths and Heights

Topics on This Page

Default Sizing
width in the <table> Tag
width in the <td> and <th> Tags
height in the <table> Tag
height in the <td> and <th> Tags
Example

Default Sizing

In the absence of any guidance from you, your browser attempts to lay out a table as best it can. As a general rule, it tries to make each column just large enough for the contents of the cell in the column that has the longest content. For example:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc">
  <tr>
    <td> Al Hirt </td>
    <td> Johnny Carson </td>
  </tr>
  <tr>
    <td> Harold Johnson </td>
    <td> George Burns </td>
  </tr>
</table>
</center>

Not too bad. Now let's see what happens when one of the cells contains a lot more information:

You may be happy with this formatting, but you might prefer having the table not sprawling the entire width of the page.

width in the <table> Tag

The width attribute in the <table> specifies a width for the entire table. You can specify a specific number of pixels (eg., width="500"), or you can specify a percentage (eg., width="50%". The percentage is a percentage of the window's width.

When you specify a width in pixels, the browser will honor that request even if the window isn't that wide. This can cause the dreaded horizontal scroll bar. In general, think twice before specifying a width of more than 600 pixels: some of your users will be using a resolution of only 640x480. And even at that resolution, there will be fewer pixels than that available if the user is using a browser window that's smaller than the full screen, or if the user is using one of the newer browsers that have a browser-dependent frame displayed on the left.

Let's use width to expand the first table:

<center>
<table border="4" cellspacing="0" cellpadding="6" bgcolor="#ffffcc"
       width="100%">
  <tr>
    <td> Al Hirt </td>
    <td> Johnny Carson </td>
  </tr>
  <tr>
    <td> Harold Johnson </td>
    <td> George Burns </td>
  </tr>
</table>
</center>

Let's see what happens if we specify width="50%" in the second table:

When you specify a width in the <table> tag, the browser will do its best to accomodate you. But if it finds that it simply can't fit your information into the table, it will try to do the best it can. Let's see what happens when we specify a ridiculously small value, width="2", in the table. The browser obviously can't fit the information into a 2-pixel wide table.

The browser has made the table as narrow as it possibly could while still fitting everything in, but it was forced to use a larger value than the one you specified.

width in the <td> and <th> Tags

If you're not happy with the width of the individual columns, you can specify widths for them as well. As with the <table> tag, you can specify widths in pixels or in percentages. The percentage this time is a percentage of the table's width, not of the browser window's width. It makes no sense to set a percentage for the width of a cell unless you've also specified a width for the table: if the browser doesn't know how wide the table is, it can't possibly know how wide 35% of the table's width is.

NOTE: The HTML 4.0 specification only allows pixel values for width in <td> and <th> tags. Today's browsers do allow percentage values, but it's possible that future browsers will not.

All of the cells in a particular column have to be the same width. You cannot have a row with a 100 pixel cell and a 200 pixel cell and another row with a 175 pixel cell and a 125 pixel cell. If you specify widths for more than one cell in a column, the browser will use the largest one. For this reason, there's no reason to specify a width for more than one cell in a column.

Let's make use of width to make our columns equal width:

<center>
<table border="4" cellspacing="0" cellpadding="6"
       bgcolor="#ffffcc" width="50%">
  <tr>
    <td width="50%"> Al Hirt </td>
    <td width="50%"> Johnny Carson, Johnny Cash,
        John Smith, John Doe, Johnny Johnson and John Adams </td>
  </tr>
  <tr>
    <td> Harold Johnson </td>
    <td> George Burns </td>
  </tr>
</table>
</center>

When your tables become more complicated, with images and lists and other things — especially other tables — the browser has a very complicated job of trying to fit things into the table and building the displayed page. It will attempt to use the widths that you've specified as guidelines, but it is free to override your values if it has difficulties fitting things together. Different browsers have different methods for building the displayed page, and you might find that your tables appear quite differently in different browsers.

height in the <table> Tag

You can use the height attribute to control the height of your table. You won't be able to squeeze the table shorter: the browser already makes the table no taller than is needed. But you can add additional height. As with width, you can specify a value in pixels or in percentages.

width is a valid (though deprecated) attribute of HTML 4.0. height, on the other hand, is proprietary. If you use it, expect to see an error message when you validate your page. Netscape 6 has dropped support of height in <table>, and it's quite possible that Microsoft will follow suit in future versions of IE.

Let's look at an example:

<center>
<table border="4" cellspacing="0" cellpadding="6"
       bgcolor="#ffffcc" height="150">
  <tr>
    <td> Al Hirt </td>
    <td> Johnny Carson </td>
  </tr>
  <tr>
    <td> Harold Johnson </td>
    <td> George Burns </td>
  </tr>
</table>
</center>

height in the <td> and <th> Tags

You can use height in table cells to control the height of a row. All of the cells in a row must have the same height, so there's no reason to specify height for more than one cell in the same row.

Unlike height in <table>, height in <td> and <th> is a valid attribute in HTML 4.0. HTML 4.0 only allows pixel values, not percentage values. Percentage values in height are supported well in some browsers but not in others.

Here's an example:

<center>
<table border="4" cellspacing="0" cellpadding="6"
       bgcolor="#ffffcc" >
  <tr>
    <td> Al Hirt </td>
    <td> Johnny Carson </td>
  </tr>
  <tr>
    <td height="100"> Harold Johnson </td>
    <td> George Burns </td>
  </tr>
</table>
</center>

Example

Here is a table with no widths or heights specified. Try adding widths and heights to various elements to see what happens. Try validating the various things you try.

Try putting width and height in one of the <tr> tags. Does it do anything? Does it validate?