• Creating a Simple Table
  • Figure 16.1.
  • Figure 16.2.
• Table Size
• Alignment and Spanning
  • Figure 16.3.
  • Figure 16.4.
• Backgrounds and Spacing
  • Figure 16.6.
• Nested Tables
  • Figure 16.7.
  • Figure 16.8.
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 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:

• Of course, the most obvious application of tables is to organize tabular information, such as a multi-column list of names and numbers.
• If you want more complex relationships between text and graphics than <IMG ALIGN="left"> or <IMG ALIGN="right"> can provide, tables can do it.
• Tables can be used to draw borders around text, or around several graphics images.
• Whenever you need multiple columns of text, tables are the answer.

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

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

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.

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 guide that there are four table tags, but you didn't mention the <TH> tag in this guide. 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

Answers

Activities

• You can use a simple one-celled table with a border to draw a rectangle around any section of text on a Web page. By nesting that single-cell table in another two-column table, you can put a "sidebar" of text to the left or right side of your Web page. Outlined sections of text and sidebars are very common on printed paper pages, so you'll probably find uses for them on your Web pages, too.
• Do you have any pages where different visitors might be interested in different information? Use a table to present two or three columns of text, each with its own heading (and perhaps its own graphic). Then something of interest to everyone will be visible at the top of the page when it first appears.