Hour 16

Advanced Layout with Tables

One of the most powerful tools for creative Web page design is the table, which allows you to arrange text and images into multiple columns and rows. This chapter shows you how to build HTML tables and how to control the spacing, layout, and appearance of the tables you create.

New Term: A table is an orderly arrangement of text and/or graphics into vertical columns and horizontal rows.

To Do: As you read this chapter, think about how arranging text into tables could benefit your Web pages. Here are some specific ideas to keep in mind:

For each of your pages that meets one of these criteria, try adding a table modeled after the examples in this chapter. The "Activities" section at the end of this chapter offers a couple of detailed suggestions along these lines, as well.

Creating a Simple Table

To make tables, you have to start with a <TABLE> tag. Of course, you end your tables with the </TABLE> tag. If you want the table to have a border, use a BORDER attribute to specify the width of the border in pixels. A border size of 0 (or leaving the BORDER attribute out entirely) will make the border invisible, which is often handy when you are using a table as a page layout tool.

There are a number of optional attributes you can specify in the <TABLE> tag, but these are discussed after you get the basics under your belt.

With the <TABLE> tag in place, the next thing you need is the <TR> tag. <TR> creates a table row, which contains one or more cells of information. To create these individual cells, you use the <TD> tag. <TD> stands for table data; you place the table information within the <TD> and </TD> tags.

New Term: A cell is a rectangular region which can contain any text, images, and HTML tags. Each row in a table is made up of at least one cell.

You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows. The example in Figures 16.1 and 16.2 shows a simple table using only these three tags.

Figure 16.1. The <TABLE>, <TR>, and <TD> tags are all you need to create simple tables.

Figure 16.2. The HTML table in Figure 16.1 has a single row with three cells.

You can place virtually any other HTML element into a table cell. However, tags used in one cell don't carry over to other cells, and tags from outside the table don't apply within the table. For example, if you wrote 

<FONT SIZE=5> <TABLE><TR>  <TD><FONT SIZE=6>Hello</TD>  <TD>There</FONT></TD> </TR></TABLE> </FONT>

The word "There" would be normal-sized because neither the <FONT> tag outside the table nor the <FONT> tag from the previous cell affects it. To make both the words "Hello" and "There" larger than normal, you would need to type: 

<TABLE><TR>  <TD><FONT SIZE=6>Hello</FONT></TD>  <TD><FONT SIZE=6>There</FONT></TD> </TR></TABLE>

Table Size

Ordinarily, the size of a table and the size of its individual cells automatically expand to fit the data you place into it. However, you can choose to control the exact size of the entire table by putting WIDTH and/or HEIGHT attributes in the <TABLE> tag. You can also control the size of each cell by putting WIDTH and HEIGHT attributes in the individual <TD> tags. The WIDTH and HEIGHT can be specified as either pixels or percentages. For example, the following HTML makes a table 500 pixels wide and 400 pixels high: 

<TABLE WIDTH=500 HEIGHT=400>

To make the first cell of the table 20 percent of the total table width, and the second cell 80 percent of the table width, you would type: 

<TABLE><TR><TD WIDTH=20%>Skinny cell</TD>

<TD WIDTH=80%>Fat cell</TD>

Alignment and Spanning

By default, anything you place inside a table cell is aligned to the left and vertically centered. You can align the contents of table cells both horizontally and vertically with the ALIGN and VALIGN attributes.

You can apply these attributes to either <TR> or <TD> tags. Alignment attributes assigned to <TR> tags apply to all cells in that row. Depending on the size of your table, you can save yourself a considerable amount of time and effort by applying these attributes at the <TR> level and not in each individual <TD> tag. The HTML code in Figure 16.3 uses VALIGN="top" to bring the text to the top of each cell and VALIGN="bottom" to bring the table images to the bottom of their cells. Figure 16.4 shows the result.

At the top of Figure 16.4, a single cell spans three columns. This is accomplished with the COLSPAN=3 attribute in the <TD> tag for that cell. As you might guess, you can also use the ROWSPAN attribute to create a cell that spans more than one row. (You'll see ROWSPAN in Figures 16.5 and 16.7, later in this chapter.)

Time Saver: As you know, HTML ignores extra spaces between words and tags. However, you might find your HTML tables easier to read (and less prone to time-wasting errors) if you use spaces to indent <TD> tags a bit, as I did in Figure 16.3.

Figure 16.3. Use ALIGN and VALIGN to control the alignment of any row or individual cell.

Time Saver: Keeping the structure of rows and columns organized in your mind can be the most difficult part of creating complex tables, especially because the tiniest error can throw the whole thing into disarray. You'll save yourself time and frustration by sketching out your tables on graph paper before you start writing the HTML to implement them.

Figure 16.4. The COLSPAN attribute in Figure 16.3 allows the top cell to span multiple columns.

Backgrounds and Spacing

You can give an entire table--and each individual row or cell in a table--its own background, distinct from any background you might use on the Web page itself. You do this by placing a BGCOLOR or BACKGROUND attribute in the <TABLE>, <TR>, or <TD> tags exactly as you would in the <BODY> tag (see Chapter 13, "Backgrounds and Color Control"). To give an entire table a yellow background, for example, you would use <TABLE BGCOLOR="yellow">.

Just A Minute: Only users of Netscape Navigator and Microsoft Internet Explorer versions 3.0 or higher will see table background colors, and only Microsoft Internet Explorer currently supports table background images.

You can also control the space around the borders of a table with the CELLPADDING and CELLSPACING attributes. The CELLSPACING attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The CELLPADDING attribute sets the amount of space around the edges of information in the cells. Setting the CELLPADDING value to zero causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders. CELLPADDING and CELLSPACING give you good overall control of the table's appearance.

You can see the effect of background color and spacing attributes in Figures 16.5 and 16.6. This table uses a 1-pixel-wide border, with 10 pixels of cell padding inside the cells and 5 pixels between the cells.

Figure 16.5. This table uses background colors for individual cells, as well as cell padding and spacing controls.

Figure 16.6. Compare the spacing and overall aesthetics of this table (from the HTML in Figure 16.5) to the "plain" table in Figure 16.4.

Nested Tables

You can place an entire table within a table cell, and that separate table can possess any and all the qualities of any table you might want to create.

For example, the table in Figures 16.7 and 16.8 has no borders, but in its bottom-left cell, I included the entire table from Figure 16.6, which does have borders. Nested tables open up a vast universe of possibilities for creative Web page layout.

Coffee Break: The boring, conventional way to use tables is for tabular arrangements of text and numbers. But the real fun begins when you make the borders of your tables invisible, and use them as guides for arranging graphics and columns of text any which way you please. For an example, take a look at:

http://www.mcp.com/sams/books/235-8/look.htm

While I worked on building this table, I left the borders visible so I could make sure everything was placed the way I wanted. Then, before incorporating this table into the final Web page, I changed to BORDER=0 to make the lines invisible. This page also links to a site called LOOK, which uses nontrad- itional layouts--and everything else we can pull out of the bag-- to be eye-catching and distinctive (albeit without any actual informative content). Your real-world site will probably be a bit more tame than the LOOK site, but of course some of you will start getting even crazier ideas. You can also see how I incorporated some simple tables into the 24-Hour HTML Café site to enhance its aesthetics and functionality:

http://www.mcp.com/sams/books/235-8/cafe16.htm

Figure 16.7. The actual source for this HTML file contains all the text from the <TABLE> tag to the </TABLE> tag in Figure 16.5.

Figure 16.8. Nesting one table inside another lets you use different borders and spacing in different parts of your layout.

Summary

In this chapter, you learned to arrange text and images into organized arrangements or rows and columns, called tables. You learned the three basic tags for creating tables, and many optional attributes for controlling the alignment, spacing, and appearance of tables. You also saw that tables can be nested within one another for an even wider variety of layout options.

Table 16.1 summarizes the tags and attributes covered in this chapter.

Table 16.1. HTML tags and attributes covered in Chapter 16.
Tag Attribute Function
<TABLE>...</TABLE>

Creates a table that can contain any number of rows (<TR> tags).

BORDER="..." Indicates the width in pixels of the table borders. (BORDER=0, or omitting the BORDER attribute, makes borders invisible.)

CELLSPACING="..." The amount of space between the cells in the table.

CELLPADDING="..." The amount of space between the edges of the cell and its contents.

WIDTH="..." The width of the table on the page, in either exact pixel values or as a percentage of page width.

BGCOLOR="..." Background color of all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute.

BACKGROUND="..." Background image to tile within all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute (Microsoft Internet Explorer 3.0 only).
<TR>...</TR>

Defines a table row, containing one or more cells (<TD> tags).

ALIGN="..." The horizontal alignment of the contents of the cells within this row. Possible values are LEFT, RIGHT, and CENTER.

VALIGN="..." The vertical alignment of the contents of the cells within this row. Possible values are TOP, MIDDLE, and BOTTOM.

BGCOLOR="..." Background color of all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes.

BACKGROUND="..." Background image to tile within all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes (Microsoft Internet Explorer 3.0 only).
<TD>...</TD>

Defines a table data cell.

ALIGN="..." The horizontal alignment of the contents of the cell. Possible values are LEFT, RIGHT, and CENTER.

VALIGN="..." The vertical alignment of the contents of the cell. Possible values are TOP, MIDDLE, and BOTTOM.

ROWSPAN="..." The number of rows this cell will span.

COLSPAN="..." The number of columns this cell will span.

WIDTH="..." The width of this column of cells, in exact pixel values or as a percentage of the table width.

BGCOLOR="..." Background color of the cell.

BACKGROUND="..." Background image to tile within the cell (Microsoft Internet Explorer 3.0 only).

Q&A

Q I made a big table, and when I load the page nothing appears for a long time. Why the wait?

A Because the Web browser has to figure out the size of everything in the table before it can display any part of it, complex tables can take a while to appear on the screen. You can speed things up a bit by always including WIDTH and HEIGHT tags for every graphics image within a table. Using WIDTH attributes in the <TABLE> and <TD> tags also helps.

Q I've noticed that a lot of pages on the Web have tables in which one cell will change while other cells stay the same. How do they do that?

A Those sites are using frames, not tables. Frames are similar to tables except that each frame contains a separate HTML page and can be updated independently of the others. The new "floating frames" can actually be put inside a table, so they can look just like a regular table even though the HTML to create them is quite different. You'll find out how to make frames in Chapter 17, "Interactive Layout with Frames."

Q I read in another book that there are four table tags, but you didn't mention the <TH> tag in this book. Why not?

A In addition to <TABLE>, <TR>, and <TD>, there is a fourth tag, <TH>. It is used exactly like <TD>, but is meant to imply that the cell is part of the heading of the table. Because there is no visible difference between <TD> and <TH> cells, many Web page authors don't bother using <TH>. Considering how much you're learning at once here, I didn't think you needed an extra tag to memorize!
For the record, I also left out another "basic" table tag called <CAPTION>. All it does is center some text over the top of the table, which you can easily do with the <DIV ALIGN="center"> tag you're already familiar with.

Q The Microsoft Web site says there's a whole new table standard, and that they're the only ones that support it. Is that true?

A The proposed HTML 3.x standard introduces several new table tags, which are supported (in their current, unofficial form) by Internet Explorer 3.0. The primary practical uses of these extensions are to exert greater control over where borders are placed in and around a table, and to prepare the ground for some advanced features that Internet Explorer does not yet offer, such as tables with their own scrollbars. Keep your eye on the Microsoft and Netscape Web sites(http://www.microsoft.com and http://home.netscape.com) for details about these new table tags.

But don't worry; the new standard will not make any of the table tags covered in this chapter obsolete. They will all continue to work just as they do now.

Quiz Questions

1. You want a Web page with two columns of text side-by-side. How do you create it?

2. You think the columns you created for Question 1 look too close together. How do you add 30 pixels of space between them?

3. Write the HTML to create the table shown below:

4. Write the HTML to create the nested tables shown below:

Answers

1. With the following table:
<TABLE><TR><TD ALIGN="top"> ...First column of text goes here... </TD><TD ALIGN="top"> ...Second column of text goes here... </TD></TR></TABLE>

2. Add CELLSPACING=30 to the <TABLE> tag. (Or you could use CELLPADDING=15 to add 15 pixels of space inside the edge of each column.)

3. <TABLE BORDER=5> <TR> <TD ROWSPAN=3>A</TD> <TD COLSPAN=3>B</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD ROWSPAN=2>C</TD> </TR> <TR> <TD COLSPAN=2>D</TD> </TR> </TABLE>

4. <TABLE><TR> <TD>A</TD> <TD> <TABLE BORDER=1> <TR><TD>B</TD></TR> <TR><TD>C</TD></TR> </TABLE> </TD> <TD>D</TD> </TR></TABLE>

Activities