Living in a Cell - Trials and Tabulations - HTML with Style

Trials and Tabulations

Living in a Cell

Column Widths

The most important issue in displaying tables is just how wide each column should be. Row height can mostly be left to be determined by the browser, since it will be made tall enough to accommodate all of the cell's contents. But column width is important since some columns (say, those displaying text) should have more space than others (say, those displaying single-digit numbers).

Normally you would set column widths using the CSS width property, applying to either individual cells or to columns and column groups, as we saw earlier. However, Navigator doesn't apply width to table elements. The alternative is the deprecated HTML WIDTH attribute to table cells.

WIDTH is slightly different from the attributes we've seen so far in that it accepts a type of value called a multi-width. Multi-widths are used when specifying the width of various adjoining elements, such as table columns. A multiwidth is a number followed by an asterisk, such as 1*, 2*, 3* etc. The number can be left out; a lone asterisk is equivalent to 1*. Multi-widths work like this: after all the columns that have fixed widths are allocated widths, the tables that have multi-width values share the remaining space, with each column taking up a part of the space proportional to the number in the multi-width. So if you have two columns, one with a width of 2* and the other with a width of 3*, the first one will get 40% of the width and the second one will get 60% of the width, so that the ratio of their widths is 2:3.

Multi-widths are nice because they scale well with the display. If the user has a larger display than the author expected, the columns will still get their correct share of space. Unfortunately, multi-widths are unsupported by current browsers with the exception of the value *, which is interpereted correctly. So, after you've set the widths of any columns you want to specify, you can just give the rest a width of * and they'll be given equal widths.

The other two types of values accepted by WIDTH are pixel lengths and percentages. A pixel length will make the column exactly as wide in pixels as the value of the WIDTH attribute. This is bad because it does not scale well to different display sizes. 150 pixels may be an incredibly narrow column for someone viewing the document on one of those funky 21" monitors (and if anyone wants me to verify this and feels like giving me one for Christmas, please e-mail me!), but it's a significant proportion of screen width for someone using a 14" monitor at a small resolution. The only reason you would want to specify a pixel value for a width is if you want to make the column as wide as an image (we haven't talked about how to insert those in your document yet, but keep it in mind).

Alternatively, and this is the best solution, you can specify column widths as a percentage of the total table width. This makes for the best-looking tables that scale well on any resolution.

The WIDTH attribute can be set on column elements or table cells. However, since Navigator doesn't recognize column elements, it's best to use it on table cells. It's a good idea to set widths on the table cells of the first row only. These values are used for the rest of the rows as well.

Obviously, the constraints set by the WIDTH attribute can not always be satisfied. For instance, a column can have a pixel width larger than the width of the table, or the percentages in various columns could add up to more than 100%. Browsers' width calculation algorithms are fairly complicated, so to avoid strange results, it's best to follow this simple procedure:

1. Give any columns that need to have them pixel widths.
2. Give other columns percentage widths so that they are given a percentage of the width that will fit their contents nicely.
3. Leave at least one column with a WIDTH of * (the default) so that it takes up all available space when everything else is displayed.

This will usually give you the desired result on all displays. This is not as powerful as controlling widths with CSS, but it will have to do for the time being.

Table Widths

Normally, the width of the table is made such that it will fit all of its columns. Sometimes, however, especially when you're using tables for layout, you might want to specify the width of the entire table. You can do this by setting the WIDTH attribute on the TABLE element. This works similarly to the WIDTH attribute on cells and columns, except it only accepts pixel lengths and percentages. Obviously, using a pixel length for an entire table is bad. Using a percentage value, which refers to the width of the parent element, is the best idea.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/7.html
Created: Feb 10, 1998
Revised: Feb 16, 1999