January 2001 || Volume 01, Issue 06

Down to Basics... Much Ado About Tables

In my last column, I showed you some of the basic tags which are used to build web pages. If you missed that one, I'll wait while you go and cram (November column).

Tables were invented in the early days of the web in order to display tabular data. Nothing very surprising about that, but then every web site designer/creator jumped on them as a new tool to help them arrange web pages and lay things out the way they wanted. So tables have become a much used (and abused) part of the web. So how do they do what they do?

Col 1	Col 2	Col 3
something	a bit more	and quite a pile of leftovers in this column
sum	total	group
grand total

Besides being the ugliest table you've ever seen, what was that about? That was about this...

<table border="1" width="350" cellspacing="5" cellpadding="2" bgcolor="#FFFFCC">
	<colgroup>
		<col width="75" />
		<col width="75" />
		<col width="200" />
	</colgroup>
	<tr>
		<th align="center" bgcolor="#99CCCC">Col 1</th>
		<th align="center" bgcolor="#6699CC">Col 2</th>
		<th align="center" bgcolor="#00CCCC">Col 3</th>
	</tr>
	<tr>
		<td valign="top">something</td>
		<td valign="top">a bit more</td>
		<td valign="top">and quite a pile of leftovers in this column</td>
	</tr>
	<tr>
		<td align="right">sum</td>
		<td align="right">total</td>
		<td align="right">group</td>
	</tr>
	<tr>
		<td colspan="3" valign="middle" align="right" bgcolor="white"
            height="3.0em">
<b>grand total</b></td>
	</tr>
</table>

As the example above shows, a table can have coloured cells (note the bgcolor attribute in the 8th, 9th and 10th lines in the code above) and can be enclosed within a border (1st line). But neither is a requirement. This, for example is a valid table...

This	is a
table	too.

In fact, if you examine the source code of this page, the one you're reading right now here at Mac OS Journal, you'll see that it is a large and complex table, the structure of which is carefully designed to place this article in a long tall cell on the left of the page and another to the right for ads and such. More cells are at the top of the page to hold the standard header material, and at the bottom for links. If you look closely at the code you'll see that there are even tables placed inside cells in a larger table. All to push things around on the page to suit the site designer. Whether this is a good thing is something I'll take up at a later date.

Now let's have a look at those tags that are used to make tables.

table - the master tag; all table code goes within a <table></table> tag pair
tr - table row; one for each row in your table; tr tag pairs contain any th and td tags
th - table header; for the title of columns; your browser decides how to display this; usually it comes out bold and centered
td - table data; one tag pair for each table cell; this is where the data goes; this article is contained entirely within a single pair of td tags
colgroup - used to define how the following table cells will be displayed
col - one column in the colgroup
caption - places the enclosed text in a line centered below the table

All of these tags can have attributes to set formatting within their defined area of control. As you can see in the top example on this page, you can set the width of a cell in the th or td tag, or of a column at a time within the col tag. You can set horizontal alignment using the align attribute or vertical alignment using the valign attribute, cell height using the height attribute, cell padding (space between the border and the text) or cellspacing (space between cells), and whether or not the border shows and how thick it should be. Finally you can specify the background colour of any cell or the entire table, or both (with the cell's setting over-riding the table's).

Tables can be fussy things to create using just a text editor, as it's sometimes hard to imagine the results of the code. Even making these small examples was an iterative process using my fave text editor, BBEdit. However, if you use one of those graphical web page editors - anything from good old PageMill to the latest edition of GoLive or DreamWeaver - it's a lot easier. They offer simple table creation by selecting from a palette and clicking and dragging, and, depending on your brand and version, may even allow auto-formatting to various styles. For example, while the simple table at top took me more than ten minutes of fiddling to create as raw code, the one below took only a minute or so in GoLive 5. (And I think you'll agree it looks better.) I simply dragged the table icon from a palette onto the blank page, typed my text into the cells, then selected from a drop-down list of styles to format it instantly. Then I went back and changed the top-left cell to a white background, and centered the text in the top two cells. I don't bother with graphical editors for the most part, but when I need a table in a hurry, they're great tools.

So to conclude, tables are useful on the web for two main purposes: displaying data in a row and column format, and page layout. How you use the table tags will vary greatly depending on which of those two tasks you're doing. And in one of these columns I'll get around to discussing some of the grand issues of web page design, including the pros and cons of using tables for page layout.

Until then, don't forget to keep looking at the source code of any page that catches your eye. Learn what to do from the experts, and what not to do from the rest of them.

Rob Stevenson - rstevenson@macosjournal.com
Rob's Page - Feedback Form