... HTML & Webpages ...

PLAYING WITH TABLES

... Recommend this series to a friend.

Here is the basic template. I was thinking about what text to use in this table. And having just finished this page while I was also working on my income tax; doing that for my favorite uncle (his name is Sam), is it any wonder that the text begins with a dollar sign?

It might help you in remembering (and understanding) these tags to know that TR stands for "table row" and TD stands for "table data" ... now the basic template:

<CENTER> <TABLE>
<TR>
<TD> $1,000 </TD>
<TD> $2,000 </TD>
</TR>
</TABLE> </CENTER> <P>

I placed the "P" tag at the end but that's arbitrary (I do it out of habit) Anyway, here is the result of placing the above template in your editor:

$1,000 $2,000

SAME TABLE WITH 3 COLUMNS & TWO ROWS

<CENTER> <TABLE>
<TR>
<TD> $1,000 </TD>
<TD> $2,000 </TD>
<TD> $3,000 </TD>
</TR>

<TR>
<TD> $4,000 </TD>
<TD> $5,000 </TD>
<TD> $6,000 </TD>
</TR>
</TABLE> </CENTER> <P>

And here is the result of placing the above template in your editor:

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

There are times when you might want the table to look just like that (without a border) ... it's a cool way to line text up in the center with that particular table arrangement. However, let's say you want a border around the text. Try this:

ADDING BORDER TO TABLE

<CENTER> <TABLE BORDER="1">
<TR>
<TD> $1,000 </TD>
<TD> $2,000 </TD>
<TD> $3,000 </TD>
</TR>

<TR>
<TD> $4,000 </TD>
<TD> $5,000 </TD>
<TD> $6,000 </TD>
</TR>
</TABLE> </CENTER> <P>

And the result is (sounds like the academy awards) "And the winner is..."

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

CELLSPACING … placing some space between the cells:

<CENTER> <TABLE BORDER="1" CELLSPACING="5">
<TR>
<TD> $1,000 </TD>
<TD> $2,000 </TD>
<TD> $3,000 </TD>
</TR>

<TR>
<TD> $4,000 </TD>
<TD> $5,000 </TD>
<TD> $6,000 </TD>
</TR>
</TABLE> </CENTER> <P>

And the result is (you try it with different cellspacing values):

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

CELLPADDING … placing some space between the text:

<CENTER> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5">
<TR>
<TD> $1,000 </TD>
<TD> $2,000 </TD>
<TD> $3,000 </TD>
</TR>

<TR>
<TD> $4,000 </TD>
<TD> $5,000 </TD>
<TD> $6,000 </TD>
</TR>
</TABLE> </CENTER> <P>

And the result is (you try it with different cellpadding values):

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

I notice that my text (those numbers) seem rather week, at least on my browser. It might not be necessary in your particular case (different browsers, different backgrounds) but it seems I need some boldness to the text. So here we go; we substitute TH for the TD:

MAKING DATA BOLD

<CENTER> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5">
<TR>
<TH> $1,000 </TH>
<TH> $2,000 </TH>
<TH> $3,000 </TH>
</TR>

<TR>
<TH> $4,000 </TH>
<TH> $5,000 </TH>
<TH> $6,000 </TH>
</TR>
</TABLE> </CENTER> <P>

And the result is:

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

ADDING COLOR TO CELLS

Here I used basic colors so no hexidecimals were necessary; remember, if using hexidecimals, it is prefaced with a pound sign. Additional note, for our practice purposes, you might change the colors to suit your particular page background.

<CENTER> <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5">
<TR>
<TD BGCOLOR="RED"> $1,000 </TD>
<TD BGCOLOR="WHITE"> $2,000 </TD>
<TD BGCOLOR="BLUE"><FONT COLOR="WHITE"> $3,000 </FONT> </TD>
</TR>

<TR>
<TD BGCOLOR="RED"> $4,000 </TD>
<TD BGCOLOR="WHITE"> $5,000 </TD>
<TD BGCOLOR="BLUE"> <FONT COLOR="WHITE"> $6,000 </FONT> </TD>
</TR>
</TABLE> </CENTER> <P>

Notice that for the white cell I introduced a darker font (black). You should keep in mind throughout your page decor that proper contrast is a must. I have seen too many pages where one has to strain to see the text (dark blue over black? that's impossible) and here, using regular style with nothing bold, the result is:

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

~~ OR ~~ (making bold by using the TH instead of TD tags)

$1,000 $2,000 $3,000
$4,000 $5,000 $6,000

FRAMING A PICTURE

It's a cute trick using the "table" tag. You can make a picture look framed just by increasing the border ... as follows (you can path the eyes.jpg file the same as you did on page 10 where we discussed uploading our first graphic and page 11 where we discussed placing our graphic) - Page 10 - Page 11 - only if you need the review.

<CENTER> <TABLE BORDER="10">
<TR>
<TD> <IMG SRC="Files/eyes.jpg"> </TD>
</TR>
</TABLE> </CENTER> <P>

If I'm not mistaken, I think the tag for you was <IMG SRC="Files/eyes.jpg"> where you uploaded it to a Files subdirectory. It's your file manager so only you would know. Anyway, announcing the winner, Miss Internet:

See? It's really a table with one row and one cell. Result: picture is framed ready for the art museum. Let's see now; how about MOMA (Museum of Modern Art)?

A brief note ... going to "view source" for this page is the last thing you should do, don't even think of it. In order to save space in my backup (in my word processor), I removed all unnecessary spaces. It's what we call in NYC one big "mish-mash" but still, very accurate. It works because, well, it's giving you this page to read.


And we'll continue on the … Next Page … a recommend email.
And while we're at it, how to make a email button.
Note that in this series, they all recommend to this section's index page.

We return to the … Table of Contents … enjoy your work.

And if anything to add or correct - - I certainly would appreciate it.

Return to ... Navigator ... that's it.

1