HTML By Example ch15fi.htm

- HTML By Example -

Chapter 15 Adding Tables to Your Documents

Many chapters ago you learned to use the <PRE> tag to create preformatted tables that align your data and text for easy reading. The HTML 3.0 table specification, however, takes you far beyond that. Tables are a great addition to any Web site—especially sites that need to offer a lot of information in an easy-to-read way. Unfortunately, tables can't be viewed by all browsers. So, you need to proceed with a little caution and consideration.

The current HTML 3.0 tables standard, in its entirety, isn't viewable by many browsers. In this chapter, everything discussed is part of the HTML 3.0 standard—but something less than the entire thing. Creating tables in this way will make your tables viewable in the widest number of browsers.

Creating a Table

Tables work a lot like HTML list tags, in that you must use the table container tag to hold together a group of tags that define each individual row. The main container is the <TABLE> tag, which uses enclosing tags for table rows (<TR>) and table data (<TD>). Most tables will also use an element for table headers (<TH>) which is generally used as the title text for rows and columns.

Tables take the following format:

<TABLE>

<CAPTION>Caption text for table</CAPTION>

<TR><TH>column1</TH><TH>column2</TH><TH>column3</TH>

...

</TABLE>

An example of a table using this format might be the following:

<TABLE>

<CAPTION>Team Members for 3-Person Basketball</CAPTION>

<TR><TH>Blue Team</TH><TH>Red Team</TH><TH>Green Team</TH>

<TR><TD>Mike R.</TD><TD>Leslie M.</TD><TD>Rick G.</TD>

<TR><TD>Julie M.</TD><TD>Walter R.</TD><TD>Dale W.</TD>

<TR><TD>Bill H.</TD><TD>Jenny Q.</TD><TD>Fred B.</TD>

</TABLE>

After you work with HTML list containers, it's fairly easy to make the jump to creating tables in HTML. You can see how this table looks in figure 15.1.

Fig. 15.1

A simple table in HTML.

**The <TABLE> Tag**

The <TABLE> tag is actually a rather complex creature, at least insofar as it can accept many different attributes. Some of the attributes are more useful than others, so let's look at the most useful of them as they currently stand:

ALIGN. The ALIGN attribute is used to determine where the chart will appear relative to the browser window. Valid values are ALIGN=LEFT and ALIGN=RIGHT. As a added bonus, text will wrap around the table (if it's narrow enough) when the ALIGN=LEFT or ALIGN=RIGHT attributes are used.
WIDTH. The WIDTH attribute sets the relative or absolute width of your table in the browser window. Values can be either percentages, as in WIDTH="50%", or absolute values. With absolute values, you must also include a suffix that defines the units used, as in px for pixels or in for inches (e.g., WIDTH="3.5in"). Absolute values for table widths are discouraged, though.
COLS. The COLS attribute specifies the number of columns in your table, allowing the browser to draw the table as it downloads.
BORDER. The BORDER attribute defines the width of the border surrounding the table. Default value is 1 (pixel).
CELLSPACING. The CELLSPACING attribute tells the browser how much space to include between the walls of the table and between individual cells. (Value is a number in pixels.)
CELLPADDING. The CELLPADDING attribute tells the browser how much space to give data elements away from the walls of the cell. (Value is a number in pixels.)

It is definitely not necessary to use all of these attributes for your table—in fact, the simple table example earlier didn't use any of them. Often, however, they will come in handy.

Example: Playing with Table Attributes

This is another fairly freeform example. Let's look at the difference between a plain table and a table embellished with a few attributes. Insert Listing 15.1 in a new HTML document.

Listing 15.1 Creating a Plain Table

<BODY>

<H2> BigCorp's Computer Systems </H2>

<P>We use only the highest quality components and software for all of our

Wintel computer systems. Plus, if you don't see a configuration you like,

call (or email) and let us know. We'll custom build to please!</P>

<TABLE>

<CAPTION>BigCorp's Computer Systems and Specifications</CAPTION>

<TR><TH>System 486</TH><TH>System 586</TH><TH>System 686</TH>

<TR><TD>486DX2-66 CPU</TD><TD>120 MHZ AMD586</TD><TD>200 Mhz Pentium Pro</TD>

<TR><TD>14.4 Modem</TD><TD>28.8 Modem</TD><TD>28.8 Modem</TD>

<TR><TD>desktop case</TD><TD>minitower case</TD><TD>tower case</TD>

<TR><TD>DOS/Win 3.1</TD><TD>Windows 95</TD><TD>Windows NT 4.0</TD>

</TABLE>

</BODY>

Now, take a quick glance at how this looks in a browser (see fig. 15.2).

Fig. 15.2

A simple table, without attributes, can still be difficult to read.

Last time we tried a simple table, it communicated its data well. But this one is fairly ineffective, with everything lined up so poorly. Using just the attributes just mentioned, though, you can change this table so that it looks better to the user and is easier to read.

All that needs to change is the first <TABLE> tag:

That makes for a much nicer looking table, complete with borders and lines for cells, and a comfortable amount of spacing to separate cell data elements from one another (see fig. 15.3).

Fig. 15.3

Look how nice the table looks with spacing and borders.

The rest of this example is up to you. Play with CELLSPACING and CELLPADDING without a border, for instance, or increase all values out of proportion. See the range of what's available, to help you choose how to format your tables in the future.

Captions, Table Headers, and Table Data

To round out your tables, you have the other basic tags to examine. You've already successfully used <CAPTION>, <TH>, and <TD>, but each have their own attributes and abilities that you need to know about.

<CAPTION>

The <CAPTION> tag is a container for reasons that may be obvious—it allows you to nest other HTML tags within the description. For instance:

<CAPTION><B>Table 3.1 from the book <I>Life in El Salvador</I></B></CAPTION>

Just about any sort of markup tags are possible inside the <CAPTION> tags, although some—like list tags—wouldn't make much sense.

The <CAPTION> tag has one attribute, ALIGN. ALIGN="TOP" and ALIGN="BOTTOM" are encouraged. By default, text is also aligned to center (horizontally). By TOP and BOTTOM, I'm referring to the entire table; the caption will default to the top of the table if not otherwise specified. To align the caption to BOTTOM, for instance, enter the following:

<CAPTION ALIGN="BOTTOM">Table of Common Foods</CAPTION>

The <CAPTION> tag is commonly the first tag just inside the <TABLE> tag (although this placement is not required). Regardless of where you place the <CAPTION> tag, however, you must use ALIGN to force it to the bottom of the table. Otherwise, it will appear at the top, according to its default.

Let's create an entire table and use the ALIGN attribute to the <CAPTION> tag to force the caption to the bottom, like this:

<BODY>

<H3>Favorite Ice Cream Flavors</H2>

<CAPTION ALIGN="BOTTOM">Data from the <I>New Jersey Times</I></CAPTION>

<TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH>

</TABLE>

</BODY>

When the browser interprets this table, it should place the caption at the bottom of the table, centered horizontally (see fig. 15.4).

Fig. 15.4

You can align the caption to BOTTOM.

Table Rows

Table rows (<TR>) can accept one attribute you should concern yourself with—ALIGN. The ALIGN attribute is used to determine how text will appear (horizontally) in each of the rows data cells. For instance:

<TR ALIGN="CENTER"><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH>

Here, I've added the ALIGN attribute (with a value of CENTER) to the rows in the previous example. Notice now that all cells center data horizontally (see fig. 15.5). This ALIGN attribute can also accept LEFT and RIGHT.

HTML 3.0 also supports another useful attribute, VALIGN, which accepts the values TOP, BOTTOM, and CENTER. Using this attribute, you can choose to align cells vertically as well as horizontally. Until they support VALIGN, non-HTML 3.0 browsers should ignore VALIGN. Unfortunately, that's currently the most popular browsers!

Fig. 15.5

This uses the ALIGN attribute with <TR>. (Compare this to figure 15.4.)

Table Data and Rows

You've already used the <TH> and <TD> tags to include headers and data in your tables. You may have noticed that, essentially, the only difference between the two is that <TH> emphasizes (boldfaces) the text and <TD> does not. Now, technically, the <TH> is a tag that the browser interprets as a header and thus displays text in a way that's distinct from the <TD> tag. In practice, that generally means it's turned bold.

Aside from accepting nearly any type of HTML markup tags within them, both tags can accept four attributes (in most HTML versions). These are ALIGN, VALIGN, COLSPAN, and ROWSPAN. If you were to add all of these attributes, a typical <TH> (or <TD>) tag would be formatted like the following:

ALIGN is used to align the data within the cell horizontally, accepting values of LEFT, RIGHT, and CENTER. Note that ALIGN is redundant when used with the ALIGN attribute of <TR>, unless it is used to override the <TR ALIGN=> setting.

VALIGN is used to align the data vertically within cells. Possible values are TOP, BOTTOM, and CENTER. COLSPAN and ROWSPAN are used to force a cell to span more than one column or row, respectively. An example of this might be:

<TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Average</TH>

<TR><TH>Susan T.</TH><TD>80</TD><TD>95</TD>

<TR><TH>Bill Y.</TH><TD COLSPAN="2">Dropped Course</TD>

</TABLE>

Viewed in a browser, the table looks like figure 15.6.

Fig. 15.6

Using COLSPAN and ROWSPAN in a table.

Example: An Events Calendar

One interesting way to use a table is to create a calendar, which is possible with what we now know about attributes for tables and table elements. Let's create a calendar for November 1996. We'll also throw in some hypertext links that would (presumably) be used to discuss events planned for those days. Enter Listing 15.2 in a new HTML document.

Listing 15.2 Using HTML Tables to Create a Calendar

<BODY>

<H2>Coming Events</H2>

<P>Click any of the days highlighted in the calendar to read about the event

scheduled for that day.</P>

<CAPTION>BigCorp's Calendar of Events - November 1996</CAPTION>

<TR ALIGN="CENTER"><TD>10</TD><TD><A

HREF="nov11.html">11</A></TD><TD>12</TD><TD>13</TD><TD><A

HREF="nov14.html">14</A></TD><TD>15</TD><TD>16</TD>

30</TD><TD>31</TD>

</TABLE>

</BODY>

Notice the   in the <TD> tag that is defined with COLSPAN? That is an escape sequence for Web browsers that tells it "I want a non line-breaking space here." Without that, the extra-long cell won't be rendered correctly (with a complete border) because there's nothing in that cell. With it, this table looks like a calendar (see fig. 15.7).

Fig. 15.7

Creating a calendar with HTML table tags.

Example: Product Specifications

One thing that hasn't really been touched on so far is the possibility of including images in tables. It's definitely possible, and just about as easy as anything else you've done with tables.

In this example, let's create a product specifications table for a couple of our company's computer systems. With liberal use of the ALIGN and VALIGN attributes, this should come out looking rather pretty. Insert Listing 15.3 in a new HTML document.

Listing 15.3 Using ALIGN and VALIGN with Images in an HTML Table

<BODY>

<H2>Product Specifications</H2>

<P>The following table will tell you a little more about our computer

systems. Clicking on the name of each system will tell you even more,

offering a full-size photo of the system and some suggestions on

peripherals.</P>

<HR>

<CAPTION>Our System Configurations</CAPTION>

<TR ALIGN="CENTER"><TH>Photo</TH><TH>Name</TH><TH>RAM</TH><TH>Hard

Drive</TH><TH>Video</TH><TH>Expansion</TH><TH>Case</TH>

System 6001-60</A></TD><TD>8 MB</TD><TD>500 MB</TD><TD>1 MB PCI</TD><TD>4 PCI

Slots</TD><TD ROWSPAN="2">Desktop</TD>

System 7001-75</A></TD><TD>16 MB</TD><TD>1.0 GB</TD><TD>1 MB PCI</TD><TD>5 PCI

Slots</TD>

System 8001-120</A></TD><TD>20 MB</TD><TD>1.6 GB</TD><TD>2 MB PCI</TD><TD>5 PCI

Slots</TD><TD>Tower</TD>

</TABLE>

</BODY>

Graphics look very nice in tables, and they work well to enliven what would otherwise be drier, text-heavy information (like computer specs). I've offered up some creative uses of attributes in this example, but I think it was worth it (see fig. 15.8).

Fig. 15.8

A very complete custom HTML table.

Summary

Tables are an incredible leap over the <PRE> tag for formatting HTML text. The basic tags, <TABLE>, <CAPTION>, <TR>, <TD>, and <TH> give you everything you need to build an impressive, easy-to-read table for data elements.

Building on those tags, you can add formatting to rows, cells, and individual text. You can also add just about any conceivable type of HTML markup to your table data. You can even include graphics and hypertext links to take tables to a higher level.

Review Questions

1. Why doesn't this chapter discuss the entire HTML 3.0 tables standard?

2. Does the ALIGN attribute for <TABLE> allow text to wrap around the table?

3. What does the in stand for in the attribute definition WIDTH="3.5in" for the <TABLE> tag?

4. What's the different between the attributes CELLPADDING and CELLSPACING?

5. True or False? You must always define a value for the BORDER attribute to the <TABLE> tag.

6. If I had the following example:

<TABLE>

<TR><TH>Soup</TH><TD>Chicken Noodle</TD>

<TR><TH>Salad</TH><TD>Tossed Green</TD>

<CAPTION>My favorite foods</CAPTION>

</TABLE>

7. where would the <CAPTION> text appear relative to the table?

8. Is it possible to ALIGN all of the data cells in a particular row with the <TR> tag?

9. What happens in the following example?

<TD>Ted David<BR>Mike Rogers<BR>Bill Howell</TD>

10. Which is used for horizontal alignment when used as an attribute to the <TD> tag, ALIGN or VALIGN?

11. What possible reason could there be to force a <TD ALIGN> tag definition to override a <TR ALIGN> tag?

Review Exercises

12. Create a caption, aligned to the bottom of the table, that includes an image. Does it work correctly?

13. Create a table that uses images as the column headers.

14. Create a table of "thumbnail" images, with an small image, description of the image, and the image's filename in each row. Make each image clickable, so that a larger image appears (on a new page) when the user clicks the thumbnail.

15. Create a table with no visible border (BORDER="0"). With this table, it's possible to lay out very intricate pages, with text and graphics aligned to the left or right of the page. Use the table to place a paragraph of text on the left side of the page and three clickable graphics on the right side. (Hint: Use ROWSPAN on the paragraph's cell.)

| Previous Chapter | Next Chapter |

| Que Home Page | Digital Bookshelf | Disclaimer |

To order books from QUE, call us at 800-716-0044 or 317-361-5400.

For comments or technical support for our books and software, select Talk to Us.