Home

Basics

Using Flags

Placing Images

Colors

Backgrounds

Linking Pages

Tables

Getting Online

HTML Basics, Tips and Tricks
by Fox Bautista

TABLES

Tables are a useful tool for organizing data on a page. We'll start out by looking at a simple table, and then deconstructing it so we know what makes it up. Here's a little table of my favorite ice cream flavors:

Here's a line-by-line explanation of the code used to write it. It starts out with:

<TABLE BORDER="1" WIDTH="40%" ALIGN="CENTER">

First, we denote that we're making a TABLE. The BORDER command denotes how much of a border we want around it (the bigger the number, the thicker the border). The WIDTH specifies how wide we want it to be, and the ALIGN command specifies where we want to place it. (You can choose from LEFT, RIGHT and CENTER.)

<CAPTION>My Favorite Ice Cream Flavors</CAPTION>

If you want a caption over your table, place it within <CAPTION> and </CAPTION> flags, like I did.

<TR>
<TD>Chocolate</TD>
<TD>Cookie dough</TD>
<TD>Strawberry</TD>
</TR>

Here, I've started the first row of the table. <TR> stands for Table Row and denotes the beginning of a row. Now, after the <TR> comes whatever data you want to stick in the row. See how each flavor is enclosed in its own "cell"? To start a cell, use <TD>, which stands for Table Data, then type in the data and close it with </TD>. Make as many as you want (in this case, I made three), then close off the row with </TR>.

Now the second row. It's the same-- to start a new row, I put in <TR>. The rest of the flavors are each in their own <TD> and </TD> flags.

<TR>
<TD>Mint chip</TD>
<TD>Bubble gum</TD>
<TD>Cookies & cream</TD>
</TR>

And finally, I ended it with:

</TABLE>

Easy as Mommy's apple pie! (hi, Mom!) If you want to use images as your table data, instead of text, you can. Just do the usual <IMG SRC=" "> inside the <TD> and </TD> flags. Let's make a little one-row, one-column table to demonstrate:

<TABLE BORDER="1" WIDTH="11%" ALIGN="CENTER">
<TR>
<TD> <IMG SRC="image.gif"> </TD>
</TR>
</TABLE>

Here's what it'll look like:

Finally, within the <TD> flags, you can specify the alignment of the table data. <TD ALIGN="CENTER"> will give you data that's in the center of the cell. <TD ALIGN="LEFT"> and <TD ALIGN="RIGHT"> align the data to the left and to the right, respectively.

And that's how to do tables. Guess what? This is the last lesson! Now that you've got the skills you need, go and design your own way-cool pages. Then, whenever you're ready, Get Your Work Online!