Use these to jump around or read it all…
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….
| 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.
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
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:
Those of you who still use hex codesknow 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.
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:
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.
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!
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
