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.
| Note |
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. |
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>
<TR><TD>row1data1</TD><TD>row1data2</TD><TD>row1data3</TD>
<TR><TD>row2data1</TD><TD>row2data2</TD><TD>row2data3</TD>
...
</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.
Figure 15.1: A simple table in HTML.
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:
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.
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 badtable.html 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>8 MB RAM</TD><TD>16 MB RAM</TD><TD>16 MB RAM</TD>
<TR><TD>500 MB HD</TD><TD>1 GB HD</TD><TD>1.4 GB HD</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).
Figure 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 only 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:
<TABLE BORDER ALIGN="LEFT" CELLSPACING="3" CELLPADDING="3">
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).
Figure 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.
To round out your tables, you have the other basic tags to examine. You've already successfully used <CAPTION>, <TH>, and <TD>, but each has its own attributes and abilities that you need to know about.
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>
<TABLE BORDER>
<CAPTION ALIGN="BOTTOM">Data from the <I>New Jersey Times</I></CAPTION>
<TR><TH>Date</TH><TH>Chocolate</TH><TH>Vanilla</TH>
<TR><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR><TH>1990</TH><TD>40%</TD><TD>60%</TD>
</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).
Figure 15.4: You can align the caption to BOTTOM.
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>
<TR ALIGN="CENTER"><TH>1970</TH><TD>50%</TD><TD>50%</TD>
<TR ALIGN="CENTER"><TH>1980</TH><TD>76%</TD><TD>24%</TD>
<TR ALIGN="CENTER"><TH>1990</TH><TD>40%</TD><TD>60%</TD>
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.
Figure 15.5: This uses the ALIGN attribute with <TR>. (Compare this to figure 15.4)
| Note |
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, those are currently the most popular browsers! |
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:
<TH ALIGN="direction" VALIGN="direction" COLSPAN="number" ROWSPAN="italics">
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:
<TABLE BORDER>
<TR><TH>Student</TH><TH>Test 1</TH><TH>Test 2</TH><TH>Average</TH>
<TR><TH>Mike M.</TH><TD>100</TD><TD>75</TD><TD ROWSPAN="3">N/A</TD>
<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.
Figure 15.6: Using COLSPAN and ROWSPAN in a table.
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 calendar.html 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>
<TABLE BORDER WIDTH="75%">
<CAPTION>BigCorp's Calendar of Events - November 1996</CAPTION>
<TR ALIGN="CENTER"><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH>
<TH>Fri</TH><TH>Sat</TH>
<TR ALIGN="CENTER"><TD COLSPAN="5"> </TD><TD>1</TD><TD>2</TD>
<TR ALIGN="CENTER"><TD>3</TD><TD>4</TD><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>
<TD>9</TD>
<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>
<TR ALIGN="CENTER"><TD><A HREF="nov17.html">17</A></TD><TD>18</TD><TD>19</TD>
<TD><A HREF="nov20.html">20</A></TD><TD>21</TD><TD>22</TD><TD>23</TD>
<TR ALIGN="CENTER"><TD>24</TD><TD>25</TD><TD>26</TD><TD>28</TD><TD>29</TD><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).
Figure 15.7: Creating a calendar with HTML table taps.
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 aligntbl.html 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>
<TABLE BORDER CELLSPACING="2" CELLPADDING="2">
<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>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_6001.GIF"></TD><TD><A HREF="6001.html">
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>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_7001.GIF"></TD><TD><A HREF="7001.html">
System 7001-75</A></TD><TD>16 MB</TD><TD>1.0 GB</TD><TD>1 MB PCI
</TD><TD>5 PCI
Slots</TD>
<TR ALIGN="CENTER"><TD><IMG SRC="sml_8001.GIF"></TD><TD><A HREF="8001.html">
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).
Figure 15.8: A very complete custom HTML table.
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.