Tables are a remarkably versatile feature of web documents. They can be used to create simple tables, to line up columns, to make borders, and even to create simple banners. For example, the "banners" at the tops of these pages are all created with tables rather than being images in their own right - click on "View Source" from the "View" menu to see the tags. As a side note, the "View Source" function is a remarkably useful tool - with it, you can easily see what tags others have used to create their own pages, and can learn from other people's coding. Take a look at the code for this page - it has several tags you'll be learning in later lessons.

Okay, back to tables.

The tags for a simple table are:

<TABLE ALIGH= BGCOLOR= BORDER= WIDTH= CELLPADDING= CELLSPACING= HSPACE= VSPACE= >
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>

This table is set with ALIGN=RIGHT.
The beginning tag sets the properties for most of the table. As with an image, ALIGN sets the table's alignment with respect to the text around it. If you don't define an alignment, the table will be set on its own line from the surrounding text. RIGHT will put the table to the right, with text flowing on the left (as shown), LEFT will put the table on the left with the text flowing around in the right. CENTER puts the table in the middle of the page, with no text on either side.

This table's BGCOLOR is #ffcc33 This cell has its own background color!
This cell doesn't. Neither does this one.
BGCOLOR sets the background for the table. If no color is set, the table's background will be page's background is. A table's background color (or lack thereof) can be overridden within the individual cells. In the example to the left, the table's background color (#FFCC33) is overridden by the upper right hand cell's color (#C0C0C0).

This table's border is 1
BORDER is set to equal the number of pixels wide you want the border around the table.
This table's border is 5
If you want no border, set it equal to zero or leave the whole BORDER entry out. Borders are automatically shaded to look three-dimensional (see the example to the left). Borders can be affected by the value set for CELLPADDING, see below.

BORDER=5
CELLPADDING=5
CELLSPACING=0
WIDTH defines the table's width, either in pixels (in which case WIDTH would be set equal to an integer) or in a percentage of the browser's window's width (expressed by a number followed by %).
BORDER=5
CELLSPACING=5
CELLPADDING=0
CELLPADDING defines the space left around the contents of a table cell in pixels; CELLSPACING defines the space between the cells themselves. Both values can be set to zero. CELLPADDING only affects the spacing within the cells themselves (see examples), but CELLSPACING will change what the border looks like (see examples).

The rows of a table are defined by the <TR> and </TR> tags (TR for Table Row). Within the rows, the cells are defined by the tags </TD> and <TD>(TD for Table Data). Like with images, HSPACE and VSPACE define the number of pixels left blank around the edges of the table.

You don't have to set values for every one of the characteristics in the first table tag. For example, here is a table without any of them set:

First Row, First Cell First Row, Second Cell First Row, Third Cell
Second Row, First Cell Second Row, Second Cell Second Row, Third Cell

The best way to learn about tables is to experiment with them, and look at what other people do with them. Go back to Lesson 6 and take a look at the table used to demonstrate the color codes. Use the "View Source" feature to see its code. Although tables may appear complex at first, a little practice will soon have you using them for almost everything.

Design Tip:
Tables are an easy way to create rectangular blocks of different colors to emphasize text. Look at the source code for this section of the page, and see how the Design Tips are created!
Problems? Questions? Send us