Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

• GDT 150 Home
• Class Information
• Assignments
• Notes & Handouts
  • September 9
  • September 11
  • September 16
  • September 18
  • September 23
  • September 30
  • October 14
  • October 16
  • November 6
  • November 13
• Student Work

GDT 150 Design for the Internet: Fall 2002

September 23

Using Tables to Lay Out a Page

Tables are one way to gain control over page layout in HTML 4. Tables can be very quirky, and Dreamweaver sometimes doesn't do a very good job with precision table layout.

Like paragraphs, tables are block-level elements, which mean that each table starts on a new line; two tables will not be next to each other on a web page unless you change their alignment attribute.

Sample 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 and/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 some browsers can render nested tables very slowly. Keep your tables as simple as possible, nested or not.

Spacer Cells

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.

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.

The second is to use a nested table. 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 on the cell.

Backgrounds

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.

Using Tracing Images in Dreamweaver

In the Page Properties dialog box are the tracing image options. A tracing image is a background only seen in Dreamweaver to help you lay out your page. If you browse to an image that you saved, and then reduce the opacity to 50%, you'll see a knocked back version of the final layout, so you can check your progress against it.