Topics on this page:

1. Width and height in <td> tags
2. Conflicting values
3. Percentages in <td> tags
4. Percentage widths in the <table> tag

width and height in <td> tags

Here's an example of a table that specifies widths in a <td> tag:

<table border="3" cellpadding="0" cellspacing="0" width="400">
  <tr>
    <td width="100"> <br> </td>
    <td width="100"> <br> </td>
    <td width="100"> <br> </td>
    <td width="200"> <br> </td>
  </tr>
  <tr>
    <td height="100"> <br> </td>
    <td> <br> </td>
    <td> <br> </td>
    <td> <br> </td>
  </tr>
</table>

Here's how this table displays:

One thing to notice here: I specified width="400" in the <table> tag, but the individual widths I've specified in the <td> tags add up to 500. Netscape and IE both used the value of 400 in the <table> tag to determine the actual table width, and resized the cells to fit. So although I've specified 100 in three of the columns and 200 in the other, they actually scaled these down to 80 and 160. There are browsers that handle this differently: Mosaic will display this table with a width of 500, ignoring the width="400" in the <table> tag. To avoid these kinds of difficulties, you want to try to make sure your widths add up to the correct value.

If you're wondering about those <br> tags in the table cells - Netscape ignores any width and height attributes for a cell that's completely empty. As a general rule, always put SOMETHING into a cell - either a <br>, an &nbsp; or a transparent image - when you want it to appear empty.

Let's try taking out the width="400" in the <table> tag:

The only difference here is that the width="400" was removed from the <table> tag. Now the table is formatted with a width of 500.

You'll notice that I only included the width attribute in the <td>'s of the first table row. All cells in a given column are always the same width, so it is not necessary to repeat these values in subsequent rows. The same thing applies to height: all cells in a given row will have the same height, so you only need to specify the height for one of the cells in the row.

Conflicting Values

What happens if you put conflicting values in? In general, the largest width in a given column and the largest height in a given row will win. For example:

<table border="3" cellpadding="0" cellspacing="0" width="400">
  <tr>
    <td width="100"> <br> </td>
    <td width="100"> <br> </td>
    <td width="100" height="75"> <br> </td>
    <td width="200"> <br> </td>
  </tr>
  <tr>
    <td width="50" height="25"> <br> </td>
    <td width="200" height="50"> <br> </td>
    <td height="100"> <br> </td>
    <td> <br> </td>
  </tr>
</table>

What happens if a cell isn't big enough to hold what you've put into it? Here's an example:

<table border="3" cellpadding="0" cellspacing="0" width="300">
  <tr>
    <td width="100" height="50">
      Now is the time for all good
      men to come to the aid of
      their country.
    </td>
    <td width="100"> <br> </td>
    <td width="100"> <br> </td>
  </tr>
  <tr>
    <td> <br> </td>
    <td> <br> </td>
    <td height="100">
      <img src="Pie.jpg" width="292" height="224"></td>
  </tr>
  <tr>
    <td> <br> </td>
    <td>
      In this cell, there's a
      reallylongwordthatsverywide.
    </td>
    <td> <br> </td>
  </tr>
</table>

Now is the time for all good men to come to the aid of their country.
	In this cell, there's a reallylongwordthatsverywide.

Netscape and IE will try to honor the width attribute in the <table> tag, but it will override this if it has to. I specified width="300", but this table is being displayed with a width of nearly 600.

Here's what the browser has done:

1. The rightmost column was made wide enough for the image.
2. The middle column was made wide enough for the long word.
3. Since the table at this point is already wider than the requested width, the leftmost column was made as narrow as possible.

Be aware, though, that this is just what these browsers do and is not necessarily what other browsers might do - or what future versions of Netscape and IE might do. It's quite possible that a browser could reduce the size of an image to fit a cell, or to trim off the portions that don't fit. For text, it's quite possible that a browser would only display the portion that fits. A really poorly behaved browser could even let part of the text or image spill into another cell. So the best thing to do is not to present the browser with these types of dilemmas.

Percentages in <td> Tags

HTML 3.2 only allowed pixel values in <td> and <th> tags. HTML 4.0 also allows percentages (eg., width="50%"). 50% means half the width of the table, not half the width of the browser window. Consider the following:

<table border="3" cellpadding="0" cellspacing="0" width="50%">
  <tr>
    <td width="50%"> <br> </td>
    <td width="50%"> <br> </td>
  </tr>
</table>

In the <table> tag, I have width="50%". 50% of what? In this case, the table is embedded inside of the table that I have put this message into. That table is defined with width="600". So this table has a width of 300. Each of the two cells is half of that width.

What if I didn't include that width="50%" in the <table> tag? Now what do the width="50%" attributes mean in the <td> tags? The table no longer has a fixed width. Here's what happens:

<table border="3" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%">X</td>
    <td width="50%">X</td>
  </tr>
</table>

Wow! Both Netscape and IE just make the cells large enough to hold the contents. With no table width to base a percentage on, the browser simply ignores the width attributes.

Percentage widths for Tables

A lot of people recommend using percentage widths for tables. I don't really agree with this - I use a large monitor (21") at 1280x1024 resolution. My system is capable of 1600x1200 resolution although my eyes aren't - but you can bet there are younger eyes out there that use this resolution. And who knows - maybe before long there will be people using 35" monitors with resolutions like 2400x1800 or so. If you use a percentage width, think about how your table will look stretched across all that width.

For example, here's a table that uses width="75%" and height="100%". Here's a much-reduced snapshot of the table at 1280x1024:

You can see just how sparse these huge table cells look. I personally would find this better displayed with a fixed width - perhaps 500 or so - because it just doesn't look good spread across too great a width. If you do use a fixed width in your tables, try to keep it to no more than 600 wide so that it can display at 640x480 without horizontal scrolling.

In these pages, I use a fixed-width 600 pixel wide table. I find it easier to read a message formatted that way than one that spreads across the entire width of my 21" monitor. The disadvantage, of course, is that people using a browser window of less than 600 pixels width will be forced to scroll.

Some Closing Thoughts

Well, this message has rambled on about long enough - I hope it gave you some insights into table dimensions.

My recommendation: try to avoid using width and height attributes at all, and just let the browser size the table itself - the browsers are pretty good at that. Add width and height only when absolutely necessary to get the layout you want.