ACOM: Web Design Tutorial Site

Table attributes and properties

There are a great many ways in which table tags can be qualified either through the use of attributes or style sheet definitions. This section covers the most common ones. Unfortunately this is not something that is simple to do. There are so many combinations of possibilities. Attributes or style sheet properties might appear in any or all of the three main table tags, possibly with slightly different uses within each; browser support also varies.

The table below is complex, but with attention, should be fairly self-explanatory. Where links appear, these are to further discussions of those attributes which appear after the main table. Examples of all these attributes can be found in this lesson's subsequent pages, and I think the easiest way to start getting a grip on the possibilities of some of these attributes is to look at the examples. Better still, start experimenting for yourself.

ALIGN. As is often the case, ALIGN=center within the <TABLE> tag doesn't always work. If you absolutely have to have a table centre-aligned, either nest it within <DIV ALIGN=center> tags, as with images, or define it in the style sheet, which is always more robust anyway. Remember that alignment defined within table rows or cells only works for that row or cell, rather than the whole table: a good example of inheritance.

WIDTH and HEIGHT. WIDTH is probably the most useful attribute. In its absence, browsers will choose the width for themselves, and will make tables, and the columns (cells) within them, as large as they have to be to fit the contents. The results can be a little unpredictable, and untidy. Using the WIDTH attribute gives you more control. (See, for example, the two tables on the simple tabulated text page.) HEIGHT might seem equally useful but in practice is rare. It's usually not a problem how tall a table is, and rare to want it any longer (or shorter) than is dictated by the content. It's there if you need it, though.

WIDTH can take a percentage, or relative value, and an absolute value. Make sure you realise what effects each will have - and it also depends whether the attribute appears in the <TABLE> or <TD> tag:

(Note the need for quotation marks around values that have a % sign in them.)

When I say "available space", this will usually be the browser window. But browser windows can, of course, be different sizes. The advantage of using a relative value is, therefore, that the table will rearrange itself if the browser window is resized. With absolute widths you run the risk of the table being viewed in a window (or a whole screen, with some older monitors) that is too narrow to show all the specified pixels. You'll then get a horizontal scroll bar, which is usually a bit of a no-no when browsing the web. Remember also that text size can vary between users, if they change browser settings, and a very specific width in pixels may prove to be too small if they do this.

On the other hand, absolute values are quite useful when dealing with images in your tables, as there will sometimes be a need to ensure that a table or table cell is exactly wide enough to contain an image, with no space wasted. This is true when creating multipart images using tables, for example.

Finally note that "available space" for the <TABLE> can also refer to the space within a table cell, if the table is nested within another table! Confused? Well, try reading the pages on nesting tables and whole page layout, and note that the main table on this page has a WIDTH of 100%, but clearly doesn't extend across the whole browser window. That's because it's constrained within another table cell with a width of only 65% of the browser window. I know it can seem confusing at first, but you soon get used to it - in any case, if you get something wrong, it'll quickly be apparent.

SUMMARY. I didn't include this in the table above, but it's worth remembering. SUMMARY goes in the <TABLE> tag and does what it says, taking a value of a string of characters that define a brief summary of the table contents. This is designed for use by non-visual browsers. For more information see the page on other accessibility issues.

Back to the top

Back to the menu for lesson 4