more complex table techniques

The page on basic table structures was illustrated with some simple tables that were just straightforward grids. Despite their apparent simplicity there is still a lot you can do with a table that is basically 2 × 2, say, or 4 × 3 or even 1 × 3 (there is no reason why tables must have more than one row, or more than one column within each row: even 1 × 1 tables can be useful). But all we've done so far is define the numbers of rows and columns and let the browser take care of everything else. The real power of tables starts to become apparent with the many ways in which you, the designer, can override the browser defaults and control the size, structure and appearance of tables. This page starts you on that path.

The most familiar way to override browser defaults is, of course, with styles. Like any other tag, the table tags can have styles defined in a style sheet. Bear in mind, though, that there are two distinct consequences of using styles with tables. You can define the appearance of the text which appears within your table, by defining <td> in a similar way to <p> or any other block-level tag. However, bear in mind that if you want more than one block of text within a table cell, you cannot only use <td> to format your text (think about it). In practice I always include <p> tags within <td> tags (this is perfectly acceptable) and leave the text formatting to the <p>. None of this, however, prevents styles being very helpful in laying out the table, and that is what this page concentrates on.

IMPORTANT: I do not claim that this page or even this lecture cover the entirety of what can be done with tables. There is a great deal of formatting which can be applied to tables, and much of it is very advanced. Tables are difficult enough without confusing learners with obscurities like table-row-group. A full specification for table styling is available at http://www.w3.org/TR/REC-CSS2/tables.html but realise that you will only need this if and when you want to progress to a standard greater than this course expects of you.

table size

The first and most useful style property here is width. 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. (You can also use height, which might seem equally useful but in practice is rarer. 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 is often used by designers who want to ensure a page fits precisely in a window, but of course the trouble is that you can never be sure how big your readers' windows are going to be. It's there if you need it, though.)

width can take a percentage or relative value, or an absolute value. Make sure you realise what effects each will have. As ever, an absolute value remains the same in all circumstances, whereas a relative value is defined as such-and-such a proportion of whatever page element the defined element lies within. In practice (and though I illustrate this with ad hoc styles the same applies for global definitions in the style sheet):

Relative values are always better, but 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.

"Available space" for the <table> tag will usually refer to the width of the browser window, but if you nest your tables, it will refer to the width of the table cell inside which the other table is nested. Confused? Well, try reading the pages on nesting tables and whole page layout. 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.

Back to the top

backgrounds

The virtual lecture hopefully illustrated the impact that can be achieved by giving table cells different backgrounds (if you need a reminder have another look at the Mondrian page in the second browser window). Remember that this is a technique that can be applied to any block-level element, but it is with tables (and particularly table cells or <td> tags) that it is most widely used, and most useful. The relevant style sheet property is background-color.

You can also apply background images only to particular cells or tables. Once you get to lecture 5 have a look at that page for details as there are interesting creative possibilities here.

This is all very interesting but do I really need all those ad hoc styles? Fair point. If you looked at the code for the Mondrian page you may have seen ad hoc styles dangerously close to taking over the page. What if, say, you used a table to lay out each page on your site and always wanted the left column to be, say, 15% of the window and blue, but the wider right column a white background? They both use <td> tags, so do you have to use an ad hoc style for one of these tags on every page? The answer is no: you use a style sheet class. I could have introduced these earlier but they are not straightforward and so I waited until we really needed them. Now we do: so you should read that page next.

Back to the top

merging cells

There's one more useful topic to discuss here, however, which again is demonstrated by the Mondrian page. Although, as I said, you can do a lot with straightforward grids, you may sometimes want to join two or more cells together and treat them as one. As an example, look at this table:

This is done with an attribute, colspan. Note it is an attribute and not a style property: this is considered structural information. The code for this table is the same as any other table except that the middle row only has two <td> tags instead of three. The first of these tags looks like this:

<td colspan="2"><p>cell D</p></td>

This is exactly how the Mondrian page works. Look at how the "text box" in the middle spans more than one column (compare it to the coloured blocks in the top row). If you want to create a table like this the best thing to do is determine the largest number of <td> tags in any given row and remember that if you ever want fewer than this, you will need to use colspan somewhere.

There is also a rowspan attribute but this can be fiddly. Always include it in the relevant <td> tag of the topmost row of those you want that cell to span. Each subsequent (lower) row has that <td> tag omitted; it has, in effect, already been taken care of. As with many things in web design, you'll soon see if you get it wrong.

Don't get too complex with your rowspan and colspan attributes, by the way. Beyond a certain point - and you reach that point quite soon - it is better to design complex page layouts using nested tables.

Back to the top

Back to the menu for lesson 4