|
Tables are great for presenting information on a Web page. With a little guidance, they're easy and fun, too!
|
What do Martha Stewart, Julia Child, and good Web authors have in common? That's right:they all set a mean table. It's almost impossible to create a Web site nowadays without using tables. While it's not always obvious that information is organized using tables, they're everywhere--from simple columns of data to complicated, visually compelling page layouts. Long ago, back in the days when Mosaic was still a popular browser and the <TABLE> tag had not yet been invented, forming orderly rows of information on Web pages was a time-consuming, tedious chore.
Today, HTML tables are, without a doubt, the most essential tool in a Web designer's arsenal. When you design with HTML tables, your page looks the way you want it to look, no matter what operating system, browser software, or monitor size it's viewed with. As you may suspect, figuring out how to code HTML tables is far from intuitive; you probably can't count on a Zen moment clarifying all the stuff you need to know. This section introduces you to the wonders of HTML tables and basic table coding.. Armed with information--and a little practice--you'll soon be table-ready.
The best way to understand HTML code is to jump right in and set up a table so that you can see what I'm talking about. Cut and paste this code to experiment with it. This sample code doesn't do much. It just takes four lines of information and organizes them, two by two.
-- Begin cut and paste here --
<HTML>
<BODY>
<TABLE>
<TR>
<TD>Row One, Data One</TD>
<TD>Row One, Data Two</TD>
</TR>
<TR>
<TD>Row Two, Data One</TD>
<TD>Row Two, Data Two</TD>
</TR>
</TABLE>
</BODY>
</HTML>
-- End cut and paste here --
This code produces the following results:
| Row One, Data One |
Row One, Data Two |
| Row Two, Data One |
Row Two, Data Two |
|
HTML code uses "tags." These tags serve distinct purposes relating to placement and appearance of your on-screen text and usually come in pairs, one that turns an attribute on and one that turns the attribute off. Tags are easy to identify because they appear in angle brackets , < >; an ending tag also has a slash, </>.
If you take a good look at the code, you notice that the table is surrounded with a beginning tag, <TABLE>, and an ending tag, </TABLE>. Essentially, these two tags define the beginning and ending of the table. Easy enough. But things get a bit more complicated from here.
Each table is composed of rows. A row is a horizontal strip of data and is denoted by the Table Row tags, <TR> and </TR>. <TR> marks the beginning, leftmost edge where the information starts; </TR> marks the end of a row of data (this is where, if you were working on a typewriter, you'd hit the carriage return).
In turn, each row is composed of one or more data elements, which are surrounded by the Table Data tags, <TD> at the start and </TD> at the end of the code. (If you've worked with spreadsheet programs like Microsoft Excel, you may find it almost impossible not to call table data elements "cells." That's okay. You can call these things anything you want--cell, box, Gladys, whatever--as long as you don't start making up imaginary tags.)
Your Web browser automatically formats tables to an arrangement that it finds optimal (unless you specify otherwise, as I demonstrate in the next section). Your browser aligns all table cells into a grid format so that each cell in a vertical column is the same width. The width of each cell is influenced by the amount of data it contains relative to the other cells in the table. Your Web browser also automatically reflows the table whenever you change the size of your browser window. Fortunately, there are plenty of ways to control the appearance of tables.
GIVING YOUR TABLE SOME LEGS
You can modify the <TABLE> tag in many ways to control the appearance of your table. Modifiers appear inside the table tag, after <TABLE but before the >:
<TABLE WIDTH=X BORDER=X ALIGN=LEFT CELLPADDING=X>
You can put the modifiers in any order you want, but you must separate each from the other with a space. You can use as many modifiers as you like, or none at all. Here are some of the most useful modifiers to the <TABLE> tag:
- WIDTH=X (or X%).
This modifier specifies the width of a table. As a number (WIDTH=X), this modifier denotes a fixed width in pixels. (A pixel is the smallest dot your monitor can register; an inch generally has about 72 pixels.) The table remains that width at all times, no matter how wide your browser window is. Table width can also be followed by a percent sign, in which case the width is a fraction of the width of your browser window. For example, if you set the width at 50 percent (WIDTH=50%), your table remains half the width of the user's browser window.
- BORDER=X.
With this modifier, you can increase the width of the border that surrounds your table. The width is measured in pixels. If you set BORDER to 0, your table's borders become invisible.
- ALIGN=LEFT (RIGHT or CENTER).
This modifier lets you align a table on your page, assuming that the table is relatively small. If you set your table width to fill up your browser window (WIDTH=100%), the ALIGN modifier has no effect. (Note that this modifier refers to the horizontal position of the table, not the vertical position.)
- CELLSPACING=X.
This modifier allows you to specify the distance in pixels between each cell. A small value like 1 means that each cell is almost touching the next cell. A larger value means that each cell is far apart from its neighbors (both horizontally and vertically).
- CELLPADDING=X.
This modifier lets you specify a distance in pixels inside a cell, between the cell wall and its contents. A small value means that the text inside a cell may touch the cell wall; a larger value creates a fixed horizontal and vertical margin around the text.
CELLCONFUSION=YES?
Confusing cellspacing and cellpadding is easy. Here's one way to remember the difference: Imagine that you're the shipping clerk for a mail-order computer monitor company. Before you are four boxes, each containing a monitor. The padding is the space between the monitor and the edge of the box, while the spacing is the amount of space between each box. Or, if another analogy would help, think of an insane asylum and remember that they pad the INSIDE of the cells.
A USEFUL EXAMPLE FOR YOUR EDIFICATION (or TIME FOR RECESS!)
The easiest way to get used to each modifier is to experiment. Below is an example that I've created just for this purpose. To use this example, do the following:
- Copy the text and paste it into any text editor.
- Then save it to your hard drive as test.html.
- Open this test.html file in your favorite Web browser. (It should look like the table near the end of this page.)
- Make changes in the text editor and save them.
- Hit the Reload or Refresh button on your browser to see the results of your changes.
 |
-- Begin cut and paste here --
<HTML>
<HEAD>
<TITLE> Fun with Tables! </TITLE>
</HEAD>
<BODY>
<B>Welcome to Table Play Time!</B>
<P>
Don't just sit there looking at this table! Go ahead, go to your text editor and start changing those values! For example, try changing WIDTH to 600, 100%, and 200 and then resize your browser window to try to squash your table after each change. Or set BORDER to 20 and then to 0. Why not leave BORDER at 1 and then change CELLPADDING to 0 and CELLSPACING to 15. Then switch them. Feel free to add more text to some cells and delete text from others. Or you can add a cell -- did you notice the missing cell in the last row of the table? The table is your oyster.
<P> NOTE: Remember to reload this page in your Web browser after each change.
<P>
<TABLE WIDTH="100%" BORDER="1"
CELLSPACING="2" CELLPADDING="5">
<TR>
<TD> <B>Name</B> </TD>
<TD> <B>Description</B> </TD>
<TD> <B>Wedding Invitation?</B></TD>
</TR>
<TR>
<TD> Mack Intosh </TD>
<TD> Ungrateful, overbearing, meddling, boring. But I've known him a long time. And he's my father.</TD>
<TD> Yes</TD>
</TR>
<TR>
<TD> Wilma Flintstone </TD>
<TD> Lovely, doesn't eat much, fun, compulsive, and a great singer. Haven't seen her since the divorce proceedings. Fortunately, I don't have to pay alimony.</TD>
<TD> No</TD>
</TR>
<TR>
<TD> Grover Cleveland </TD>
<TD> My old college roommate! We were fraternity brothers and made it through boot camp together after we dropped out of college. He'll be the godfather of my kids. They're due a few months after the wedding.</TD>
<TD> Yes</TD>
</TR>
<TR>
<TD> John Jacob Jingleheimer Schmitt</TD>
<TD> A distant relative. I sure hate him, but he'll never spring for the airfare, so I don't need to worry about him saying yes. At least I hope so. Hmm . . . I'll have to think about this one.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
-- End cut and paste here --
This code produces the following results:
Welcome to Table Play Time!
Don't just sit there looking at this table! Go ahead, go to your text editor and start changing those values! For example, try changing WIDTH to 600, 100%, and 200 and then resize your browser window to try to squash your table after each change. Or set BORDER to 20 and then to 0. Why not leave BORDER at 1 and then change CELLPADDING to 0 and CELLSPACING to 15. Then switch them. Feel free to add more text to some cells and delete text from others. Or you can add a cell -- did you notice the missing cell in the last row of the table? The table is your oyster.
NOTE: Remember to reload this page in your Web browser after each change.
| Name |
Description |
Wedding Invitation? |
| Mack Intosh |
Ungrateful, overbearing, meddling, boring. But I've known him a long time. And he's my father. |
Yes |
| Wilma Flintstone |
Lovely, doesn't eat much, fun, compulsive, and a great singer. Haven't seen her since the divorce proceedings. Fortunately, I don't have to pay alimony. |
No |
| Grover Cleveland |
My old college roommate! We were fraternity brothers and made it through boot camp together after we dropped out of college. He'll be the godfather of my kids. They're due a few months after the wedding. |
Yes |
| John Jacob Jingleheimer Schmitt |
A distant relative. I sure hate him, but he'll never spring for the airfare, so I don't need to worry about him saying yes. At least I hope so. Hmm . . . I'll have to think about this one. |
|
If you're finished playing around with the <TABLE> modifiers (at least for now), you probably have a better idea about what these modifiers do and how you can use them to control the look of your tables. Next , I'll discuss how to further modify tables, focusing on modifiers to the Table Data <TD> tag.
|