tables - sizing

Tables - sizing

basics
expanding
< sizing >
colors
borders
alignment
nesting
navbar
quick recap
tags
epilogue

You can specify the exact size of a table, or any of its columns. Normally the cell fits like a rubber band around its contents. By adding a WIDTH attribute to the TABLE tag, you set its width to whatever size you want it to be.

cell

You can also specify a percentage of whatever the table is in. On this page 50% will be half the size of the table cell of the right (text) column of this web page. If the table is on its own on a page, it will take half the browser window. Try stretching this page and the page you created in the editor. This one will stay the same, your table will stretch.

cell

The size of table cells is done the same way, with a WIDTH attribute in the TD tag. The table is 200 wide, the first cell 150, leaving the second cell 50 pixels in width. If you specify the second cell to 50, things will fit precisely. If you set it to a higher value, the table will stretch unpredictably. The table may get wider, the other cells may get smaller. It's always a good idea to specify all sizes, and make sure the numbers add up.

1 2

3 4

As mentioned earlier, the column size is determined by the cell width. So you only have to specify the cell widths once, in the first row. Again if you specify a different value in another row, the table will behave unpredictably. So if you only specify the widths in the first row, you will save yourself unpleasant surprises.
In some browsers you will be able to set the height of cells. Much like the width attribute, it will behave in a similar way. Not all browsers however will show the heights you specify, rendering it virtually worthless for page layout. So don't use it if your layout would depend on it.
No matter how exactly you specify your table size, things may go wrong anyway. When the table does not fit inside a browser window, it may be compressed. If the cell contents don't fit into a cell, the cell will stretch, no matter what value you set. So always try resizing the window too and evaluate what it does to your page.

Always test everything
A browser tries to interpret the instructions you give it the best way it can. If something has not been specified one way or another, the browser will try to come up with an acceptable solution. The best thing you can do as an author is to specify as much as needed. Especially those things that are important for your page to look right.
It is equally important also to view your work through those browsers that people actually use. Most widely used are Netscape, Microsoft Internet Explorer and Opera. If you are serious about your work you should have all of them installed.
Another consideration is screen resolution. I work on a 800x600 screen, like most people do. Many people still use 640x480 and a few have theirs set to larger values. This has the potential to seriously clash with your page design. There is a little utility called Sizer that can change your window size with the click of a button. It's not a bad idea to view your pages in smaller windows than yours.