Web Page Design: Tables 01


In this section, I will be demonstrating the table model for HTML 3.2. I recommend the book "Raggett on HTML 4", by Dave Raggett, Jenny Lam, Ian Alexander and Michael Kmiec (Addison-Wesley, second edition, 1998) for a treatment of the HTML 4.0 model. I do this because the HTML 4.0 model is not widely adopted at the time of writing and can't be easily demonstrated. It is easier to show examples of tables than to start from the basic elements and attributes. In fact, I usually look for an old table of mine to start from when I mark up my tables. Therefore, this section will rely on teaching by example, starting with simple tables and adding new features incrementally. Since TABLE markup is elaborate and displaying it would occupy considerable screen real estate, I will expect you to look over the page source to see the markup instead of showing it as I have done in other chapters.

Cells and span

An HTML table divides the browser canvas into an array of grids called "table cells", or "cells", for short. The cells are equal-sized, like a piece of graph paper, and you can control width of the table and thereby the number of cells on each table row. If you want to increase the width of a cell in a row, forcing it to occupy two or more cell grids, you increment its column span. Similarly, if you would like a cell to be longer than a single grid in height, you increase its row span.

You can specify the width and height of individual cells and the width of a table, this give incredible flexibility in layout control. In fact, most web pages made today seem to be made exclusively from tables. Keep in mind that such control comes at a price - those with large monitors may see web pages that won't grow to fill their screen, and those with small monitors may have to scroll to see the whole page width. This is contrary to the basic design of the HTML document model.

You can also give cells background images or colors, and align the cell data in various ways.

Cell content

Just about anything can be placed in a table cell: text, paragraphs, lists, images, even another table. As you can see from this brief introduction, table markup can be extremely complicated.

Layout suggestions

I suggest that you start table layout by using a piece of graph paper to represent a page. Draw boxes in the grid lines to lay out the components of the table. When you have an entire rectangle laid out, start the markup by reading the table from top to bottom and left to right as you mark up the rows and data cells.

Go on to next segment Go to Contents Copyright 1999 by Jim Hurley. All rights reserved.