Complete Idiot's Guide to Creating HTML Web Page

Chapter 11 Table Talk: Adding Tables to Your Page

What Is a Table?
Web Woodworking: How to Build a Table
Table Refinishing: More Table Tidbits
The Least You Need to Know

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.

What Is a Table?

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.

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:

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.

Are tables another one of those Netscape extension thingys you mentioned in the last chapter?

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:

+-------------------+ |Comestible | Size |Year| |===========+=====================+====| |Cabbage |124 pounds |1989| |Carrot |6 feet, 10 1/2 inches|1991| +-------------------+

Web Woodworking: How to Build a Table

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.

The Simplest Case: A One-Row Table

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:

If you want your table to show a border, use the <TABLE BORDER> tag instead of <TABLE> (you still close the table with the </TABLE> tag, though).
If you don't want a border, just use <TABLE>.

After you do that, most of your remaining table chores will involve the following 4-step process:

Add a row.
Divide the row into the number of columns you want.
Insert data into each cell.
Repeat steps 1-3 until done.

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:

Text
HTML text-formatting tags (such as <B> and <I>)
Links
Lists
Images

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.

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.

Adding More Rows

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 &#189; 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 &#190; inches</TD><TD>1990</TD>

</TR>

<TR>

<TD>Zucchini</TD><TD>64 pounds, 8 ounces</TD><TD>1990</TD>

</TR>

</TABLE>

Creating a Row of Headers

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>

Including a Caption

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>

Table Refinishing: More Table Tidbits

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.

Aligning Text Within Cells

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.

Spanning Text Across Multiple Rows or Columns

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.

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.

Netscape's Table Extensions

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>&lt;TABLE BORDER=5&gt;</B>

<TABLE BORDER=5>

<TR>

<TD>One</TD>

<TD>Two</TD>

<TD>Buckle my shoe</TD>

</TR>

</TABLE>



<P>

<B>&lt;TABLE WIDTH=75%&gt;</B>

<TABLE BORDER WIDTH=75%>

<TR>

<TD>Three</TD>

<TD>Four</TD>

<TD>Shut the door</TD>

</TR>

</TABLE>



<P>

<B>&lt;TD WIDTH=50%&gt;</B>

<TABLE BORDER>

<TR>

<TD WIDTH=50%>WIDTH=50%</TD>

<TD>Normal width</TD>

<TD>Normal width</TD>

</TR>

</TABLE>



<P>

<B>&lt;TABLE CELLSPACING=10&gt;</B>

<TABLE BORDER CELLSPACING=10>

<TR>

<TD>Eeny</TD>

<TD>Meeny</TD>

<TD>Miney</TD>

<TD>Mo</TD>

</TR>

</TABLE>



<P>

<B>&lt;TABLE CELLPADDING=10&gt;</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.

The Least You Need to Know

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:

A table is a rectangular grid of rows and columns.
Tables are better than using <PRE> tags to lay out text because tables are easier to work with, you can include images and links, and you can use tags to format the text with, say, bolding and italics.
All your table text and tags fit inside the <TABLE> and </TABLE> tags. Use <TABLE BORDER> if you want to display a border around the table.
Each row is defined by the <TR> and </TR> tags, and you create a cell using the <TD> and </TD> tags.
To turn a cell into a header (bold, centered text), use <TH> and </TH> instead of <TD> and </TD>.
To include a descriptive caption with the table, use the <CAPTION ALIGN=where> tag, in which where is either TOP or BOTTOM.
The <TD> and <TH> tags let you specify different horizontal and vertical alignments. For the horizontal alignment, use <TD ALIGN=alignment> or <TH ALIGN=alignment>, where alignment is LEFT, CENTER, or RIGHT. For the vertical alignment, use <TD ALIGN=vertical> or <TH ALIGN=vertical>, where vertical is TOP, MIDDLE, or BOTTOM.
To span a cell across multiple columns, use <TD COLSPAN=cols>, where cols is the number of columns to span. To span a cell across multiple rows, use <TD ROWSPAN=rows>, where rows is the number of rows to span.
Netscape has a number of extensions that work with the <TABLE> tag. These include the attributes BORDER (to change the border size), WIDTH (to specify the table width), CELLSPACING (to change the amount of space between each cell), and CELLPADDING (to change the amount of space between each cell's contents and the cell border).