HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Justification of Table Rows and Columns

When you design a table, you must ensure that the number of rows and columns sum to the correct number for your table; that is, all the rows must span the same number of columns and all the columns must span the same number of rows. For example, compare the markup in Figure 2.17 with the table rendering in Figure 2.18. The first table is defined with three columns and six rows. Note how the number of columns in each TR element always sums to three—a cell with ROWSPAN=“2”, such as the first once in Figure 2.18, contributes an extra column to the following row, since this cell “spans” two rows. Keeping track of the rows and columns tends to be a bit tricky the first time you create a table, but you will quickly get the hang of it. Often it is easiest to sketch out the table design on a piece of paper—this helps you determine the required number of rows and columns, and also where and when cells should span multiple rows or columns. If you are then coding doing tables by hand, it is useful to lay them out structurally, as done in Figure 2.17, as this allows you to see the underlying tabular structure. You should also turn on the table borders, so you can see the actual structure of the table.

Of course, it is easier if you can find a program that will create HTML tables for you. This is possible with some modern HTML editors. Note, however, that most advanced table design is still done by hand—there are still some cases where software is no match for the expert designer.

Alignment Within Table Cells

Items within elements, or along entire rows, can be aligned using the alignment attributes. ALIGN, which can take the values ALIGN=“left”, “center”, or “right”, aligns the cell contents horizontally within the cell. The attribute VALIGN is used to vertically align the content, and can take the values VALIGN=“top”, “middle”, or “bottom”. The effects of some of these alignment options are illustrated in Figure 2.18. Note that you can use these alignment attributes with a TR element, to set the alignment for all TD or TH cells in a row.

---

TIP:  Common TABLE Problems

Often, leaving out end tags (</TR>, </TD>, etc.) will cause the table to be improperly formatted. If you have problems, make sure all the end tags are in place.

Typing text inside a table, but outside a TD or TH, is illegal. If you do type text outside cell (For example, <TR> error text <TD> ...), the text that is improperly positioned will be displayed just above the table. Thus if you see text appearing magically above a table, it probably came from an error inside the table.

If you omit the </TABLE> to end a table, Netscape Navigator does not display any of the table content. Thus, look for missing </TABLE> tags if the table refuses to appear!

---

Row and Cell Properties

Finally, you can use the BGCOLOR attribute within a TR, TD, or TH element to change the background color of the cell or group of cells. This is illustrated in both example tables shown in Figures 2.17 and 2.18, where the background color has been modified to emphasize cell contents. Netscape Navigator 4 and Internet Explorer 3/4 also support a BACKGROUND attribute for specifying a background image for table cells.

Lessons from Example 8

1.  The TABLE element permits formally defined tables in HTML documents. A few older browsers do not support this element, so you may want to offer a non–TABLE alternative for these users, if this is likely to pose a problem.

2.  The BACKGROUND attribute to the BODY specifies an image file to be used as a background to the displayed text. Care should be taken to make sure that the background does not dominate or otherwise obscure the text or images lying on top. The additional BODY attributes TEXT, LINK, and VLINK allow for control of the color of the text and are described in Chapter 6.

Exercises for Example 8

Tables are complicated to design and are well worth some practice. As a first exercise, try modifying the tables in Figures 2.17 to create your own variants. You can, for example, take tabular information from a printed book or magazine and recreate the layout using HTML. Note that tables need not contain text, but can contain pictures, or even other tables—try including images, or entire tables, within a table cell.

Example 9: Tables and Backgrounds (2)

Tables are an important tool for structuring and organizing page content, and this second set of table examples illustrate some of the important tools and principles for controlling the layout of table content. Other examples are found in Chapter 6.

Table Padding, Spacing, and Borders

The TABLE element supports BORDER, CELLPADDING, and CELLSPACING attributes for specifying the size in pixels of the table border, the padding space within a cell, and the spacing between table cells, respectively. These different attributes are used in the six tables listed in Figure 2.19. Figure 2.20 shows the rendering of this document by both Netscape Navigator 3 and Internet Explorer 4. The structure and content of all six tables are the same: Each table consists of two rows, with three cells per row. In the first row, the first cell is “empty” (there is no text inside), while the remaining cells contain text; note that the third cell takes a BGCOLOR attribute to color the cell red. In the second row, the TR element takes the attribute BGCOLOR=“#b0b0b0”, which colors the row a light gray. In this case, all the cells contain text content—note that the first cell contains only an &nbsp; (a non–breaking space entity reference—entities are described in more detail in Chapter 6 and on the companion Web site in Appendix A) so that there is no visible text in this cell.

Looking to Figure 2.20, we can see the effect of the CELLPADDING, CELLSPACING, and BORDER properties (set to values of “8” in the second, third, and fourth tables, respectively). Note how CELLPADDING adds space around the content of a cell, while CELLSPACING pads the space between the cells, and BORDER simply thickens the border around the entire table.

Netscape Navigator/Internet Explorer Differences

There are important differences between these two browsers in their handling of the spacing between cells, and the coloring of “empty” cells. As you can see in Figure 2.20, Netscape does not color the cellspacing region (space between the cells) and also does not color cells that are “empty”—that is, that do not contain characters (you can trick an empty cell into being colored by placing a single &nbsp; character in it, as illustrated in the first cell in the second row of each table). This should be contrasted with Internet Explorer, which colors the cell spacing region using the TABLE background color and which colors all cells—even those that are empty.