|
|
|||
|
|
|
|
|
EarthWeb sites:
|
|
Chapter 15Adding Tables to Your Documents
CONTENTS
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.
Creating a TableTables 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> An example of a table using this format might be the following: <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> TagThe <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. Example: Playing with Table AttributesThis 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> 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. Captions, Table Headers, and Table DataTo 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. <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> 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 RowsTable 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.
Figure 15.5: This uses the ALIGN attribute with <TR>. (Compare this to figure 15.4)
Table Data and RowsYou'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> Viewed in a browser, the table looks like figure 15.6. Figure 15.6: Using COLSPAN and ROWSPAN in a table. Example: An Events CalendarOne 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> 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. Example: Product SpecificationsOne 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> 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. SummaryTables 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
Review Exercises
|
|
|
|
Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details. |
