GDT 150 Design for the Internet

Handout: Page Layout with Tables

Don’t use tables for page layout. The following content is sadly outdated…

Tables are the only way to gain real control over page layout in standard HTML. Without tables, precise placement of any element in the document would be impossible. But, tables can be very quirky, and Dreamweaver doesn’t do a very good job with precision table layout.

Tables are block-level elements, like paragraphs, which mean that each table starts on a new line; two tables will not be next to each other on a web page.

Code

<table border="1">  table
	<tr>  row
	   <td>content</td>  cell
	   <td>content</td>  cell
	</tr>  close row
	<tr> row
	   <td>content</td>  cell
	   <td>content</td>  cell
	</tr>  close row
</table>  close table

This will give you a table that looks like this:

content content
content content

There are three attributes that should be set to 0 in the table tag in order to achieve precise layout: cellspacing, cellpadding, and border.

Cellspacing is the space between cells. Cellpadding is the space between the inner edge of a cell and its content. Border is the border around the outside of the table. Setting the border equal to anything but 0 also shows the borders between cells, but their widths don’t change. If these three attributes aren’t set to 0, you can’t precisely align anything between cells. So the tag should look like this: <table cellspacing="0" cellpadding="0" border="0">

Additionally, it’s a good idea to declare width in both the table tag and the td tags. If you don’t set widths, the browser will figure it out for you, and it often doesn’t do it as you expected. Only set height if the cell you’re setting it for is a spacer cell, meaning that it’s taking up blank space.

Tables work off a simple grid system. Each row must have the same number of cells allotted to it. Columns and rows are size-dependent on each other. Every cell in a column is as wide as the column’s widest cell. Every cell in a row is as tall as the row’s tallest cell. But every column can be a different width and every row can be a different height.

Cells can span several columns or several rows. This is done with the colspan attribute for spanning columns and the rowspan attribute for spanning rows. For example:

TD rowspan=2 TD TD TD colspan=2
TD TD TD TD
TD colspan=3 TD TD

For pages that aren’t extremely simple, tables can be nested inside one another. Be careful with nested tables, though, because Netscape renders nested tables very slowly. Sometimes there’s no way around it.

In order to hold space, each cell whose size isn’t determined by other cells in the same row and column must contain something, whether it’s an image, text, or another table. Dreamweaver uses non-breaking spaces to hold empty cells open. Unfortunately, this is a very poor way of holding spacer cells in any type of accuracy is important. Non-breaking spaces change size based on the font size as determined by the user or by a style sheet. So the size of spacer cells is incorrectly rendered in two situations: #1 if the user has their fonts set large; #2 if the size of the spacer cell is smaller than the default size of the text. Practically, this means that any spacer cell smaller than 20 pixels tall or wide will be larger than intended. A spacer cell set in this fashion will change size as font size changes.

There are two generally accepted ways to correctly take up a spacer cell: a transparent gif, or a nested table. Generally, a one pixel transparent gif is stretched by setting the width and height to the appropriate size, the same as the cell is set to. I prefer the nested table method. Inside the spacer cell, make a new table with 1 row and 1 column. Set the nested table’s and cell’s width or height, or both, equal to the outer cell, and set nowrap. Dreamweaver incorrectly applies nowrap, as well. DW puts it in the tr tag; it should go in the nested td. Nowrap prevents the cell from closing in Netscape. Also, the spacer cell should all be on one line. The corrected code should look like: <td width="15"><table cellspacing="0" cellpadding="0" border="0" width="15"><tr><td width="15" nowrap></td></tr></table></td>

Change the font size and watch the height of the cells in the table below. The upper two are straight out of Dreamweaver, the lower one has been done with a nested table.

content content content

Cells can also have background colors and background images contained in them. This is done by specifying bgcolor="#339966" in the td tag or by specifying background="graphics/background.gif" Keep in mind that background images tile, or are repeated over and over again as many times as they will fit in the allotted space. This is one reason to use a background image rather than a foreground image. If you can’t control the height of a cell because there’s text in it, but want a graphic that goes all the way down the side of that text, a background graphic is perfect.