Tables and other Furniture

NOTICE:This page was written in the days of HTML 3.2 and this style of using tables for layout has since been replaced with Cascading Style Sheets (CSS) and is now looked upon as "Taboo" in our "Policitcly Correct" internet environment. This shows you what CAN be done with tables, but not necessarily what SHOULD be done :)

Hmmm... where do we begin crafting a table? Well, lets start at the start. What do we want our table to do? Are we tabling for looks?

Cool Huh? :)

Or for function?

Sunday	Monday	Tuesday	Wednesday	Thurday	Friday	Saturday
x x x	1 Labor Day x x	2 x x x	3 x x x	4 CAREN Face to Face 7:00 pm x	5 MENA Hamfest x x	6 x x x
7 x x x	8 x x x	9 x x x	10 x x x	11 ARES Face to Face 7:00 pm x	12 x x x	13 Greenville Mississippi Hamfest x
14 BBS Meeting Denny's at 3:00pm	15 MARC Face to Face 7:00pm x	16 x x x	17 x x x	18CAREN Tour of Channel 11 Studios	19 UALR Planetarium show 7:30pm Talkin 146.850	20 Little Rock VE Test Session 9:00 am
21 x x x	22 x x x	23 x x x	24 x x x	25 x x x	26 x x x	27 ARES Breakfast 9:00 am x
28 x x x	29 x x x	30 x x x	x	x	x	x
xxxxxxxxxxx	xxxxxxxxxxx	xxxxxxxxxxxxxx	xxxxxxxxxxx	xxxxxxxxxxx	xxxxxxxxxxx	xxxxxxxxxxx

Or a little of both.

October
1997

Cityxxxxxxxxxxxxxxx

Date/timexxxxxxxxxxxxxxx

Locationxxxxx

Contact Person

Anytown	Saturday Oct. 4th	No Information Given	Joe Schmutz (501) 555-1234
xxxxxxxxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxxxx	xxxxxxxxxxxxxxxxxxxx

(One of my favorite "nested" tables is...)

Christian Family Values Webring Site Registration

No matter how you slice it, all tables have a few things in common, as well as a few quirks too. To begin a table, we have to open it....

<table>

Now, if we want to make it do anything special, we can define it.
<table border="1">

xxxxxxxxxxxxxxxxxxxx

Now we have a neat little border around our table. If we just want the data without borders, just tell it border="0"

Okay, how about some color?

<Table border="1" bgcolor="#00AA00">

xxxxxxxxxxxxxxxxxxxx

Cool! Now your getting it! Okay, lets put something IN our table.

Now before we can actually store data in a table, we need to know a
couple of other commands. (For ease I have left these out until now,
but no table will even show up without them.)

These comands are:
Table Row <TR> </TR>
Table Data <TD> </TD>

ALWAYS REMEMBER When you OPEN a command (<TR>),
you MUST remember to close it (</TR>) or else it will NOT show up.

And here is how we use them.

<Table border="1" bgcolor="#00AA00">
<tr>
<td><font color="#000000" size="2">Hi There!!</font></td>
</tr>
</table>

And this will look like this...

Hi There!!

You now have the basics you need to make an effective table. Just remember
to use <TR> for each new ROW, and <TD> for each new COLUMN!

Before we leave the subject of Tables, there is one more command I would
like to show you. It is not really one of my favorites, but it does make
nice buttons. :)
Table Header <TH> </TH>

You can use it in place of the TD statement to make nice buttons.

<table border=2 bgcolor="#AA0000">
<TR>
<TH><a href="anyfile.zip"> DOWNLOAD NOW </a></th>
</tr>
</table>

DOWNLOAD NOW

If you want to make a nice "Magizine" feel to your page, you can make "borderless" tables

<TABLE BORDER="0">
<TR>
<TD BGCOLOR="lightblue">Okay, this is the table we were talking about. Notice that we have changed only the background color of the text we want to highlight. :)</TD>
</TR>
</TABLE>

Okay, this is the table we were talking about. Notice that we have changed only the background color of the text we want to highlight. :)