Do You Want Colored Table Borders?
Whomever decided that tables should
have color capabilities shall be brought before me for a good
screaming at! As soon as I put up the tutorial on how to put color
in the table cells (see here),
the next volley of questions asked how to put color into the table
borders. Apparently many people out there are creating color test
patterns to make sure their new Trinitron monitor can actually
handle all 16 million colors. Sheesh!
But I digress. Let's try out a few
different angles, both for those using the new-fangled browsers,
and those who still dig the earlier versions. I still surf with
1.1 every so often. I figure it's a good page if I can still see
all the important parts using the earlier browsers.
But I digress again....
Here Are A Couple Of Examples
Table Cell |
Table Cell
|
Table Cell |
Table Cell
|
Table Cell |
Table Cell |
Twirley |
Twirley
|
Hey! |
Left Hand From the Heart!
|
Fillmore |
Fillmore |
Can you tell me what song that's from? I'll bet only
those who like really strange stuff can.
How The Newer Browsers
Do It
Okay, if the two tables above are
green and then purple, you are using a higher level browser. You
have the ability to run some table border commands. If both of them
are purple, stay with me here and I'll explain that stuff later.
First off -- the commands:
Here's What Made The First Table
<TABLE BORDER="30" CELLPADDING="10"
CELLSPACING="3" BORDERCOLOR="00FF00">
I am only showing the main TABLE
command, because there's nothing new with the rest of the table
that isn't already outlined in my other table tutorials.
Hey! Did you also notice the <HR>
lines are purple? But I digress, yet again.
As you can see, I made a point
of making the borders quite large, 30 in fact. That's to see the
colors more than anything required for the border color itself.
The border around the table is green because I entered this in
the TABLE command:
BORDERCOLOR="00FF00"
Those of you who still use hex
codes know that little ditty, 00FF00, as green. Those of you who
are now using word color commands should type in "green." You'll
get the same effect.
Some Extra Play With Colors
This is where I get into some fancy
stuff. This info, although fancy, is best for those without the
newer browsers. This is the way I used to get color into my table
borders before the above command was created.
This page may appear to only be
using the <BODY BGCOLOR="FFFFFF"> command. It doesn't appear
that there's any background image being used. Wrong. I am using
one. But it's pure white. Here's the BODY command from this page:
<BODY BACKGROUND="clbg.gif"
BGCOLOR="800080">
Notice I am using
both a BGCOLOR and a BACKGROUND command. The BACKGROUND command
is simply posting a pure white background. It looks like I did
it with a BGCOLOR command. Nope. It's an image. I then used a
BGCOLOR command set to "800080," or purple.
But Why?
Stop getting dramatic on me, or I'll
digress again. The reason is because when you use the two together,
the white background whips over the purple, but allows it to come
through in all the little items that create "raised" images on the
page, like table borders, cell borders, and that nice <HR>
command above. That's why the other sections are all purplish. The
BGCOLOR is coming through. Neat trick.
What's great about this is that
it works on all browsers, level 1.1 or above. It's a bit of an
extra step, but fun nonetheless. I have seen some pages that use
this, but only give a slight color change away from the background
image color. It helps the <HR> commands stand out a little
more.
Yes, it's true this can be done
with individual commands on each item. But this method allows
for all items to share the same color and for those with lower
level browsers to join in on the color fun.
Enjoy!
|