A visitor to thesitewizard.com recently asked me how she could centre (or "center" if you use American English) a table using KompoZer or Nvu. This brief tutorial teaches you how you can do this in a standards-compliant manner, using Cascading Style Sheets (CSS).
Note that although this article speaks about Nvu and KompoZer, the code given here can be used in any web or text editor. It is not dependent on Nvu or KompoZer. If you use some other editor, just ignore the Nvu and KompoZer specific instructions and dive into the code.
I will assume that you know how to create a table. If this is not true, please read one of the following guides first:
If you are using KompoZer, see How to Create Data Tables in KompoZer.
If you are using Nvu, see How to Create Data Tables in Nvu.
Your table should obviously not have a width of 100%, since if the latter is the case, you will not need to centre the table.
Note that your table can be any sort of table, a data table or one used for layout. The instructions in this tutorial are not dependent on the purpose of your table.
Open the web page with the table you wish to centre in Nvu or KompoZer.
Click somewhere in the top-leftmost cell in the table. Make sure that your cursor is blinking somewhere in that cell.
Switch to the Source mode by clicking the "Source" tab at the bottom of the Nvu window. You should see a whole bunch of gibberish which is actually the raw HTML code for your web page.
In the source mode, you should be able to see your blinking text cursor embedded somewhere after a <td> tag. Locate the <table> tag somewhere above that blinking text cursor. The <table> tag may look something like
The exact details will differ, depending on how you designed your table, but you should be able to spot text that starts with "<table" about two or three lines above your current cursor position.
We shall modify the "style" portion of the TABLE tag. That is, the text we will change is this portion:
Don't worry if the text does not look exactly like my example. I shall refer to this entire "style" portion as the "style attribute". The style attribute tells the web browser what you want your table to look like. We will be modifying it to include additional information that will cause the table to be centered.
Insert the following text just before the closing quotes of your style attribute:
That is if your style attribute originally looked like my example above, the final attribute should look like:
Switch back to the Normal mode by clicking the "Normal" tab at the bottom of the Nvu window. Your table should now be centered.
If the world only consisted of standards-compliant browsers like Firefox, Opera and the later versions of Internet Explorer, your job will be done. Unfortunately, as you know, this is not true. We will deal with this in the next section.
Since Internet Explorer ("IE") 6 and 7 are buggy in this respect, we will exploit yet another bug in those browsers to workaround this bug.
Switch back to the Source mode.
Create a few new blank lines just before the TABLE tag line, then add the following lines to that location. This entire set of lines must occur before the line with the table tag.
Look for the </table> tag. This tag closes the table, so it should be after all your table contents.
Add the following on new lines immediately after the </table> tag.
Note: if you are having trouble cutting and pasting the code in this article, you are probably using IE 6. This is due to yet another bug in IE 6. To cut and paste the code examples, use another browser for the time being.
Centring ("Centering") of the table in CSS works by setting the left and right margins of the space around the table to "auto". A browser that implements Cascading Style Sheets correctly will resize the table so that the left and right margins around the table are equal. This effectively causes your table to be centered.
Since Internet Explorer 6 and 7 does not correctly follow the standards here, we had to resort to a series of tricks.
We start by using a feature that lets us include code that applies only to Internet Explorer. This is useful for our purpose because the code we want to add is actually incorrect and may have unwanted side-effects. However, we sort of pit the plethora of bugs in IE against each other so that everything works the way we want.
Essentially, our code tries to detect IE 6 and 7. If either of them is being used by your visitor, the style in the DIV tag specifies that all the enclosed text is to be centered. By right, this should only centre text, including those found in your table, but not the table itself. However, due to another bug, IE will centre the table, but not the text in the table.
Since the code only loads for IE 6 and 7, other browsers are insulated from this problematic code. Although I have not tested it in IE 8 and later, the code above assumes that the bugs have been fixed in later versions of Internet Explorer. (I have not tested it because this article was written prior to the release of IE 8, and since IE 8 and later versions seem to be very standards-compliant, I haven't bothered to check it when I updated it.) However, if you find, for example, that you need the workaround for IE 8, you can simply modify the first line of each block to read:
The method described in this article allows you to centre a table using CSS in Nvu or KompoZer. With this code, you can style your table using standards-compliant code without resorting to deprecated tags previously used by webmasters to center tables. Best of all, the code works in all modern browsers, as well as older buggy ones like IE 6 and 7.
Copyright © 2008-2018 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 Centre a Table Using CSS in Nvu and KompoZer
