Using Tables

This page will illustrate the use of some simple tables, and some of the slightly more complex things you can do with them. In order to see what's happening, you can view the source of this page, or open pop-up windows after each table, to see the source as a text file, which you can save. Be sure to close each window before you open a new one, or the window will disappear behind your browser. If that happens, use 'ALT-TAB' to bring it out.

Simple One Row One Column Table


Everything is centered
See the code here

The row tags are the TR lines; columns are TD. The table width is big enough to contain the picture as well as the line of text. A table like this is useful for presenting pictures, with captions. But if you have no caption, use a similar table with a border to frame your picture:


Table with Border

See the code here

We took out the image size statements so that the line in question would fit in the window. Notice how we moved the TD tag to the end of the image tag ... this prevnts a blank line from appearing under the picture inside the border.

Table with Text and Picture


The text in the table is aligned left.
It's also vertically aligned at the top.
See the code here


Tables with side-by-side cells will have no margins unless you specify them. The CELLPADDING and CELLSPACING numbers do that.

Table with Colours

Background tiled image in a table cell. Background colour in a table cell.
See the code here


Notice several things. With no cellspacing or -padding codes, the text starts right at the edge. Also, you can specify a table height ... but if your text or picture exceeds this, the table will expand. Finally, notice how the text colour inside the right cell was changed, to make it easier to read.

BACK