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:

          <TABLE ALIGN=center>

             <TR>
                <TD>Row 1, Column1</TD>
                <TD>Row 1, Column2</TD>
                <TD>Row 1, Column3</TD>
             </TR>

             <TR>
                <TD>Row 2, Column1</TD>
                <TD>Row 2, Column2</TD>
                <TD>Row 2, Column3</TD>
             </TR>

             <TR>
                <TD>Row 3, Column1</TD>
                <TD>Row 3, Column2</TD>
                <TD>Row 3, Column3</TD>
             </TR>


          </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.

---

[ Previous | Next ]