So, You Want Colored Table Borders, Huh?

By Joe Burns

Use these to jump around or read it all...

[A Couple of Examples]
[How The Newer Browsers Do It]
[Some Extra Play With Colors] [But Why, Joe? Why?]

     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 (see here).

     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, Joe? 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!

[A Couple of Examples]
[How The Newer Browsers Do It]
[Some Extra Play With Colors] [But Why, Joe? Why?]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •