In this chapter, you'll learn a bit of computer carpentry as I show you how to build and work with tables. Don't worry if you can't tell a hammer from a hacksaw; the tables we'll be dealing with are purely electronic. An HTML table is a rectangular grid of rows and columns on a Web page, into which you can enter all kinds of info, including text, numbers, links, and even images. This chapter tells you everything you need to know to build your own table specimens.
Despite their name, HTML tables aren't really analogous to the big wooden thing you eat on every night. Instead, as I've said, a table is a rectangular arrangement of rows and columns on your screen. The picture below shows an example table.
An HTML table in a Web document.
To make sure you understand what's going on (that's my job, after all), let's check out a bit of table lingo:
Row A single "line" of data that runs across the table. In the example shown above, there are 8 rows in all.
Column A single vertical section of data. The previous example has 3 columns.
Cell The intersection of a row and column. The cells are where you enter the data that appears in the table.
Caption This is text that appears (usually) above the table and is used to describe the contents of the table.
Headers The first row of the table. The headers are optional, but many people use them to label each column.
Borders These are the lines that surround the table and each cell.
Nothing too rocket-science-y there.
Wait a minute. Way back in Chapter 5 you showed me how to use the <PRE> tag to make text line up all nice and neat. So why use a table when <PRE> can do a similar job?
Good question. Here are just a few advantages that tables bring to the, uh, table:Are tables another one of those Netscape extension thingys you mentioned in the last chapter?
- Getting text to line up using <PRE> is frustrating at best, and a hair-pulling, head-pounding, curse-the-very-existence-of-the-@#$%#&!-World-Wide-Web chore at worst. With tables, though, you can get your text to line up like boot camp recruits with very little effort (and without having to yell orders at the top of your lungs).
- Each table cell is self-contained. You can edit and format the contents of a cell without disturbing the arrangements of the other table elements.
- The text "wraps" inside each cell, making it a snap to create multiple-line entries.
- Tables can include not only text, but images and links as well.
- Most text tags (such as <B>, <I>, <H1>, etc.) are fair game inside a table, so you can format the table to suit your needs. Recall that text stuck between <PRE> and </PRE> is displayed in an ugly, typewriter-like font.
Nope. Netscape was the first browser to understand tables, but they've been around long enough that new releases of most big-time browsers (including NCSA Mosaic and Internet Explorer) are fluent in tables.
| Providing Text Alternatives for Tables |
Text-only browsers (such as Lynx) and most older browsers wouldn't know a table from a tubal ligation. The good news is that these browsers ignore all table-related HTML tags. The bad news is that your page ends up looking like a dog's breakfast of jumbled text. Web tailors concerned about this usually add a link to the page that takes surfers to a text-only version of the table. You construct these textual tables using simple characters such as -, =, and | for the borders, like so: +-------------------+ |
Okay, it's time to put the table pedal to the HTML metal and start cranking out some of these table things. The next few sections take you through the basic steps. As an example, I'll show you how I created the table you saw earlier.
Your tables will always begin with the following basic container:
<TABLE> </TABLE>
All the other table tags fit between these two tags. There are two things you need to know about the <TABLE> tag:
After you do that, most of your remaining table chores will involve the following 4-step process:
To add a row, you toss a <TR> (table row) tag and a </TR> tag (its corresponding end tag) between <TABLE> and </TABLE>:
<TABLE BORDER> <TR> </TR> </TABLE>
Now you divide that row into columns by placing the <TD> (table data) and </TD> tags between <TR> and </TR>. Each <TD></TD> combination represents one column (or, more specifically, an individual cell in the row), so if you want a three-column table, you'd do this:
<TABLE BORDER> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE>
Now you enter the row's cell data by typing text between each <TD> tag and its </TD> end tag:
<TABLE BORDER> <TR> <TD>Cabbage</TD> <TD>124 pounds</TD> <TD>1989</TD> </TR> </TABLE>
Remember that you can put any of the following within the <TD> and </TD> tags:
Images? Sure! Tables are a great way for text and graphics to get along with each other and not step on each other's electronic toes. For example, I wanted my home page to have an introductory paragraph surrounded by an image on each side. This is impossible with other HTML commands, but tables make it a snap. Here's a snippet of my home page HTML file, and the screen below shows how it looks.
<TABLE> <TR> <TD><IMG SRC="lonewolf.jpg" ALT=" "></TD> <TD><FONT SIZE=5>W<FONT SIZE=3>elcome, one and all, to my humble Web abode! This digital domicile (like any personal home page worth its salt) is an act of sheer, unadulterated, no holds barred, self-indulgence. It's a breathtakingly narcissistic testament to the power of traits such as self-aggrandizement, vanity, and immodesty that are the hallmarks of those of us who came of age in the '70s. So come on in, take a load off, and make yourself at home.</TD> <TD><IMG SRC="lonewolf2.jpg" ALT=" "></TD> </TR> </TABLE>
As you can see, the first column displays the image lonewolf.jpg; the second column is the introduction; and the third column is another image: lonewolf2.jpg. Note, too, that these kinds of tables look best without a border.
Use tables to help your text and graphics live in blissful HTML harmony.
| Shortcuts for Table Style |
Since one row ends where another begins (or where the table itself ends), many HTML hounds don't bother with the </TR> tag. Also, since one column ends where another begins, it's okay to bypass the </TD> tags. Finally, you'll often see a row's <TD> tags placed on one line to emphasize that these cells are on a single row. |
When your first row is firmly in place, you simply repeat the procedure for the other rows in the table. For our example table, here's the HTML that includes the data for all the rows:
<TABLE BORDER> <TR> <TD>Cabbage</TD><TD>124 pounds</TD><TD>1989</TD> </TR> <TR> <TD>Carrot</TD><TD>6 feet, 10 ½ inches</TD><TD>1991</TD> </TR> <TR> <TD>Celery</TD><TD>46 pounds, 1 ounce</TD><TD>1990</TD> </TR> <TR> <TD>Cucumber</TD><TD>20 pounds, 1 ounce</TD><TD>1991</TD> </TR> <TR> <TD>Marrow</TD><TD>108 pounds, 2 ounces</TD><TD>1990</TD> </TR> <TR> <TD>Parsnip</TD><TD>14 feet, 3 ¾ inches</TD><TD>1990</TD> </TR> <TR> <TD>Zucchini</TD><TD>64 pounds, 8 ounces</TD><TD>1990</TD> </TR> </TABLE>
If your table displays stats, data, or other info, you'll make your readers' lives easier by including labels at the top of each column that define what's in the column. (You don't need a long-winded explanation; in most cases a word or two should do the job.) To define a header, use the <TH> and </TH> tags within a row, like so:
<TR> <TH>First Column Header</TH> <TH>Second Column Header</TH> <TH>And So On, Ad Nauseum</TH> <TR>
As you can see, the <TH> tag is a lot like the <TD> tag. The difference is that the browser displays text that appears between the <TH> and </TH> tags as bold and centered within the cell. This helps the reader differentiate the header from the rest of the table data. Remember, though, that headers are optional; you can bypass them if your table doesn't need them.
Here's how I added the headers for the example you saw at the beginning of the chapter:
<TABLE BORDER> <TR> <TH>Comestible</TH><TH>Size</TH><TH>Year</TH> <TR> etc. </TABLE>
The last basic table element is the caption. A caption is a short description (a sentence or two) that tells the reader the purpose of the table. You define the caption with the <CAPTION> tag (duh):
<CAPTION ALIGN=where>Caption text goes here.</CAPTION>
Here, where is either TOP or BOTTOM; if you use TOP, the caption appears above the table; if you use BOTTOM, the caption appears-you guessed it-below the table. Here's the <CAPTION> tag from the example (for the complete document, look for BIGPLANT.HTM on the disk):
<TABLE BORDER> <CAPTION ALIGN=TOP>Table 1. Bernard Lavery's humungofoods.</CAPTION> etc. </TABLE>
The tags we've eyeballed so far are enough to let you build tables that are sturdy, if not altogether flashy. If that's all you need, you can safely ignore the rest of the dreck in this chapter. However, if you'd like a tad more control over the layout of your tables, the next few sections take you through a few refinements that can give your tables that certain je ne sais quoi.
The standard-issue alignment for table cells is left-aligned for data (<TD>) cells and centered for header (<TH>) cells. Not good enough? No sweat. Just shoehorn an ALIGN attribute inside the <TD> or <TH> tag and you can specify the text to be left-aligned, centered, or right-aligned. Here's how it works:
<TD ALIGN=alignment> <TH ALIGN=alignment>
In both cases, alignment can be LEFT, CENTER, or RIGHT. That's not bad, but there's even more alignment fun to be had. You can also align your text vertically within a cell. This comes in handy if one cell is quite large (because it contains either a truckload of text or a relatively large image) and you'd like to adjust the vertical position of the other cells in the same row. In this case, you use the VALIGN (vertical alignment) attribute with <TD> or <TH>:
<TD VALIGN=vertical> <TH VALIGN=vertical>
Here, vertical can be TOP, MIDDLE (the default alignment), or BOTTOM. Here's an example document (TBLALIGN.HTM on the disk) that demos each of these alignment options:
<HTML> <HEAD> <TITLE>Table Alignment</TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION>Aligning Text Within Cells:</CAPTION> <TR> <TD></TD> <TD ALIGN=LEFT>Left</TD> <TD ALIGN=CENTER>Center</TD> <TD ALIGN=RIGHT>Right</TD> </TR> <TR> <TD><IMG SRC="constru1.gif"> <TD VALIGN=TOP>Top o' the cell</TD> <TD VALIGN=MIDDLE>Middle o' the cell</TD> <TD VALIGN=BOTTOM>Bottom o' the cell</TD> </TR> </TABLE> </BODY> </HTML>
The figure below shows how the table looks with Internet Explorer.
The various and sundry cell alignment options.
The data we've entered into our table cells so far has been decidedly monogamous. That is, each hunk of data has used up only one cell. But it's possible (and perfectly legal) for data to be bigamous (take up two cells) or even polygamous (take up three or more cells). Such cells are said to span multiple rows or columns, which can come in quite handy for headers and graphics.
Let's start with spanning multiple columns. To do this, you need to interpose the COLSPAN (column span) attribute into the <TD> or <TH> tag:
<TD COLSPAN=cols> <TH COLSPAN=cols>
In this case, cols is the number of columns you want the cell to span. Here's a simple example (TBLSPAN1.HTM on the disk) that shows a cell spanning two columns:
<HTML> <HEAD> <TITLE>Spanning Text Across Multiple Columns</TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION>The Spanning Thing - Example #1 (COLSPAN)</CAPTION> <TR> <TD COLSPAN=2>This item spans two columns</TD> <TD>This one doesn't</TD> </TR> <TR> <TD>The 1st Column</TD> <TD>The 2nd Column</TD> <TD>The 3rd Column</TD> </TR> </TABLE> </BODY> </HTML>
The figure below shows how it looks in Netscape.
A cell that spans two columns.
Spanning multiple rows is similar, except that you substitute ROWSPAN for COLSPAN in <TD> or <TH>:
<TD ROWSPAN=rows> <TH ROWSPAN=rows>
The rows value is the number of rows you want the cell to span. Here's an example (TBLSPAN2.HTM on the disk) that shows a cell spanning two rows:
<HTML> <HEAD> <TITLE>Spanning Text Across Multiple Rows</TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION>The Spanning Thing - Example #2 (ROWSPAN)</CAPTION> <TR> <TD ROWSPAN=2>This item spans two rows</TD> <TD>The 1st Row</TD> </TR> <TR> <TD>The 2nd Row</TD> </TR> <TR> <TD>This one doesn't</TD> <TD>The 3rd Row</TD> </TR> </TABLE> </BODY> </HTML>
The picture below shows the result.
For our final table trick, we'll pull a few more Netscape extensions out of our HTML hat. (In case you missed them, I went through a boatload of Netscape niceties in Chapter 10, "Fooling Around with the Netscape Extensions.") For tables, Netscape browsers support no less than five table extras:
The border size To change the thickness of the table border, Netscape lets you assign a value to the <TABLE> tag's BORDER attribute. (Note that this applies only to the part of the border that surrounds the outside of the table; the inner borders aren't affected.) For example, to display your table with a border that's five units thick, you'd use the following:
<TABLE BORDER=5>
The width of the table Netscape usually does a pretty good job of adjusting the width of a table to accommodate the current window size. If you need your table to be a particular width, however, Netscape accepts a WIDTH attribute for the <TABLE> tag. You can either specify a value in pixels or, more likely, a percentage of the available window width. For example, to make sure your table always usurps 75 percent of the window width, you'd use this version of the <TABLE> tag:
<TABLE WIDTH=75%>
The width of a cell You can also specify the width of an individual cell by adding the WIDTH attribute to a <TD> or <TH> tag. Again, you can either specify a value in pixels or a percentage of the entire table. (Note that all the cells in the column will adopt the same width.) In this example, the cell takes up 50 percent of the table's width:
<TD WIDTH=50%>
The amount of space between cells By default, browsers allow just two units of space between each cell (vertically and horizontally). To bump that up, use Netscape's CELLSPACING attribute for the <TABLE> tag. Here's an example that increases the cell spacing to 10:
<TABLE CELLSPACING=10>
The amount of space between a cell's contents and its border Browsers like to cram data into a cell as tightly as possible. To that end, they leave a mere one unit of space between the contents of the cell and the cell border. (This space is called the cell padding.) To give your table data more room to breathe, use the <TABLE> tag's CELLPADDING attribute. For example, the following line tells the browser to reserve a full ten units of padding above, below, left, and right of the content in each cell:
<TABLE CELLPADDING=10>
Here's a Web page that shows you a fer-instance for each of these extensions (see TBLNETSC.HTM on the disk):
<HTML> <HEAD> <TITLE>Netscape's Table Extensions</TITLE> </HEAD> <BODY> <B><TABLE BORDER=5></B> <TABLE BORDER=5> <TR> <TD>One</TD> <TD>Two</TD> <TD>Buckle my shoe</TD> </TR> </TABLE> <P> <B><TABLE WIDTH=75%></B> <TABLE BORDER WIDTH=75%> <TR> <TD>Three</TD> <TD>Four</TD> <TD>Shut the door</TD> </TR> </TABLE> <P> <B><TD WIDTH=50%></B> <TABLE BORDER> <TR> <TD WIDTH=50%>WIDTH=50%</TD> <TD>Normal width</TD> <TD>Normal width</TD> </TR> </TABLE> <P> <B><TABLE CELLSPACING=10></B> <TABLE BORDER CELLSPACING=10> <TR> <TD>Eeny</TD> <TD>Meeny</TD> <TD>Miney</TD> <TD>Mo</TD> </TR> </TABLE> <P> <B><TABLE CELLPADDING=10></B> <TABLE BORDER CELLPADDING=10> <TR> <TD>Veni</TD> <TD>Vidi</TD> <TD>Vici</TD> </TR> </TABLE> </BODY> </HTML>
When you load this file into Netscape, you'll see the tables shown in the following figure.
Examples of Netscape's table extensions.
This chapter showed you the ins and outs of creating World Wide Web tables in HTML. Admittedly, tables are a bit more convoluted than the simple tags we've looked at so far. So, just to help things sink in, here's a quick review: