I received a message from a vistor to thesitewizard.com asking me how he could change the colours ("colors" in US English) of his tables in Nvu or KompoZer. This article briefly provides the procedure on how you can do this using those free web editors.
As with all my Nvu/KompoZer tutorials designed to answer specific questions, this one assumes that you already know how to create a table using Nvu or KompoZer. If you don't, please read one of the following tutorials, depending on which web editor you are using:
If you are a complete beginner who arrived here looking for an article on how to design your website using a free web editor, please read the these articles instead:
Since both Nvu and KompoZer are free web editors, choose whichever editor you wish. KompoZer is supposed to be a bug-fixed version of Nvu, so if you don't know what to choose, pick that.
There is no valid HTML or XHTML attribute that allows you to specify the colour of the table border, although some old sites used a non-standard "bordercolor" attribute to accomplish this trick. The correct way, however, of changing your table border colour is to use Cascading Style Sheets (CSS) which is supported by all modern browsers and will be supported in future browsers as well.
It is fairly easy to do this within Nvu and KompoZer.
(Note: If you removed the borders of your table, this section does not apply to you. You can either have borders, in whatever colour you choose, or no borders, in which case colour is irrelevant.)
Click one of the cells in the table you wish to configure, so that the blinking text cursor now appears inside the table.
Before we can set the colour of the table border, you must first decide on a colour and find the corresponding numeric colour value to insert. Since it's unlikely that you know all the numeric values of all the colours by heart, we will have to find the colour value from one of KompoZer's colour pickers. Click the "Table" menu. On the menu that appears, click the "Table or Cell Background Color" item. Click the colour you want. Look for the text filed labelled "Hex:", and copy the entire contents of that field. The field will contain something like "#FFCC00", which is the numeric value (in hexadecimal) corresponding to the colour you selected. Once you've copied the colour value somewhere, click the Cancel button.
I repeat: click the "Cancel" button, not the OK button. If you click the OK button, you'll be setting the colour of the table background instead of the border. We're in this dialog box merely to get the colour value which we will need later. I suggest you paste the value into a temporary place for the time being, unless you have a multiple clipboard utility installed on your computer.
Once you're back in the editor's normal mode, select the "Table" menu again and this time click the "Table Properties" item in the drop down menu.
In the dialog box that appears, make sure that your "Border" is some non-zero value. The default table created by Nvu and KompoZer has a border value of 1 pixel. Obviously if you set the border to 0 (that is, no border), your border colour changes are never going to be seen by anyone.
Click the "Advanced Edit" button in the dialog box. The "Advanced Property Editor" window will appear.
Near the top of the dialog box, you should be able to see a row of tabs. Click the "Inline Style" tab.
Click the empty text box underneath "Property:" and enter the word "border-color" (without the quotes). Enter it exactly as I wrote it, without changing anything to capital letters (uppercase) or correcting the spelling of "color" to "colour".
In the adjacent empty text box under "Value", enter the numeric colour value that you saved earlier. Include the hash symbol ("#") prefix.
When you are done, remember to click OK to all the dialog boxes to return to Nvu or KompoZer. If you use Nvu rather than KompoZer, you may not be able to see the colour changes that you made even in Preview mode, but if you save your file and load it in a normal web browser, your changes will be visible.
It's also possible to individually set the top, bottom, right and left borders to different colours. To do that, instead of entering "border-color" for the Property box, use either "border-top-color", "border-right-color", "bottom-bottom-color" or "border-left-color" accordingly.
Congratulations. You have just used CSS to modify the colour of your table border.
Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change Table Border Colours in Nvu or KompoZer
