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= >
The beginning tag sets the properties for most of the table. As with an image,
This table is set with
ALIGNsets 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.
RIGHTwill put the table to the right, with text flowing on the left (as shown),
LEFTwill put the table on the left with the text flowing around in the right.
CENTERputs the table in the middle of the page, with no text on either side.
This cell has its own background color! This cell doesn't. Neither does this one.
BGCOLORsets 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 (
This table's border is 1
BORDERis set to equal the number of pixels wide you want the border around the table.
If you want no border, set it equal to zero or leave the whole
This table's border is 5
BORDERentry 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.
WIDTHdefines the table's width, either in pixels (in which case
WIDTHwould be set equal to an integer) or in a percentage of the browser's window's width (expressed by a number followed by %).
CELLPADDINGdefines the space left around the contents of a table cell in pixels;
CELLSPACINGdefines the space between the cells themselves. Both values can be set to zero.
CELLPADDINGonly affects the spacing within the cells themselves (see examples), but
CELLSPACINGwill change what the border looks like (see examples).
The rows of a table are defined by the
Row). Within the rows, the cells are defined by the tags
Data). Like with images,
VSPACEdefine 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.
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!