CPSC 120 Lab 8:Tables

A table lays out information into rows and/or columns. Unlike frames,
where each row or column shows a different Web page, a table is just one
part of a single Web page. The basic syntax for tables is not all that
complicated, but there are a lot of options. I will only cover some of
the basic stuff here.

A table is specified in HTML source code using the TABLE
tag. Inside this tag, each row of the table is specified by a
TR tag. Inside the TR tag, you will find TD
tags that specify the individual items in the table. TD stands for "table data".
(You can use TH in place of TD. TH stands for "table header",
and might look different on the page from TD, but basically they are equivalent.)
Here is the HTML source code for a sample table:

The ALIGN=CENTER modifier puts the table in the middle
of the page. Here is the table that this produces:

Row 1, Column1

Row 1, Column2

Row 1, Column3

Row 2, Column1

Row 2, Column2

Row 2, Column3

Row 3, Column1

Row 3, Column2

Row 3, Column3

Now, it would be nice to spice this up a bit. You can do this by adding various
modifiers. For example, the BGCOLOR modifier can be use in the TABLE tag to specify
a background color for the table as a whole. You can also use it with TR to
specify the background for a row. This will override the background for the table as a whole.
Similarly, a BGCOLOR in TD sets the background color of a single cell.
(By the way, colors are usually specified with hexadecimal numbers. You can check
http://math.hws.edu/eck/colors.html
for a table of colors. This whole page is a rather large TABLE. To use
one of the hexadecimal numbers from the table, such as 00AAFF, say
BGCOLOR="#00AAFF". Don't forget the # at the beginning of the number.)
If you want to set the color of the border, use the BORDERCOLOR modifier
in the TABLE tag.

You can use the modifier BORDER=3 in the TABLE tag
to add borders to the table. And CELLPADDING=10 will add 10 pixels
of spacing around the contents of the cells.

Finally, you can specify that a cell in the table is to occupy more than
one column of the table. To make the cell spread across three columns, add
the modifier COLSPAN=3 to the TD tag. There is also a ROWSPAN
modifier that is used to extend the cell over several rows.

Here is a version of the previous table that uses many of these features:

Multi-column Heading

Row 1, Column1

Row 1, Column2

Row 1, Column3

Row 2, Column1

Row 2, Column2

Row 2, Column3

Row 3, Column1

Row 3, Column2

Row 3, Column3

A cell in a table can contain any HTML data, including multiple paragraphs,
images, links, headlines, and even other tables. Tables that contain other
tables can make for very complex structures.

Tables for Layout

Tables are often used (or misused) to control the layout of
a page. The effect can be similar to layout with frames. But
all the data is on a single Web page. The HWS Web site is done in
this way. For a simpler example, you can look at my
information page.
The main layout of this page is a table with two columns. The left column
holds an image. The right column holds another table.