How to Centre a Table Using CSS in Nvu and KompoZer

A visitor to thesitewizard.com recently asked me how she could centre (or "center" if you use American English) a table using 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.

Assumptions

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 Nvu, see How to Create Data Tables in Nvu at http://www.thesitewizard.com/gettingstarted/nvu3.shtml

• If you are using KompoZer, see How to Create Data Tables in KompoZer at http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-3.shtml

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.

How to Use CSS to Center a Table in Nvu / KompoZer

1. Open the web page with the table you wish to centre in Nvu or KompoZer.

2. Click somewhere in the top-leftmost cell in the table. Make sure that your cursor is blinking somewhere in that cell.

3. 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.

4. 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

   <table style="text-align: left; width: 60%;" border="1"
     cellpadding="2" cellspacing="2">
   

   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:

   style="text-align: left; width: 60%;"
   

   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.

5. Insert the following text just before the closing quotes of your style attribute:

   margin: auto;
   

   That is if your style attribute originally looked like my example above, the final attribute should look like:

   style="text-align: left; width: 60%; margin: auto;"
   

6. 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 Opera, Safari and Firefox ( ) your job will be done. Unfortunately, as you know, this is not true. We will deal with this in the next section.

Accomodating the Buggy Browsers: Internet Explorer 6 and 7

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.

1. Switch back to the Source mode.

2. 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.

   <!--[if (IE 6)|(IE 7)]>
   <div style="text-align: center;">
   <![endif]-->
   

3. 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.

   <!--[if (IE 6)|(IE 7)]>
   </div>
   <![endif]-->
   

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.

Explanation of the Standards-Compliant CSS Code and the IE Workaround

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 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 our code only loads for IE 6 and 7, other browsers are insulated from this problematic code. Also, since Microsoft is likely to fix these bugs in IE one day (IE 7 for example has fewer CSS bugs than IE 6), later versions of IE are treated as though they work correctly. However, if you find, for example, that a future version like (say) IE 8 still has the same bug, you can simply modify the first line of each block to read:

<!--[if (IE 6)|(IE 7)|(IE 8)]>

Conclusion

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, even buggy ones like IE.

Copyright © 2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.

thesitewizard™ News Feed (RSS Site Feed) 

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

• WordPress Vs Drupal Vs Expression Engine: Which Blog Software Should I Use?
• The Fine Print in Web Hosting: Resource Usage Limits
• How to Create a Logo for Your Site the Quick and Easy Way
• How to Register Your Own Domain Name
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• The Beginner's A-Z Guide to Starting/Creating Your Own Website
• How to Accept Credit Cards on Your Website
• How to Make Money From Your Website

New Pages

• How to Add the Copyright Symbol to Your Web Page
• How to Create and Use Cookies in PHP
• How to Insert Google AdSense Advertisements into Your Blogger Blog
• How to Design a Two Column Layout for Your Website Using CSS
• Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters
• Why Do the Pictures on My Web Page Not Show Up in Nvu / KompoZer? Troubleshooting the Broken Images on Your Page.
• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
• Should You Use Cloaked Domain Redirection to Point to Your Website?
• Why Is My Site Not Ranking in the Search Engines?
• What Sort of Website Should I Create In Order to Earn Money?

Popular Pages

• How to Start / Create Your Own Website: The Beginner's A-Z Guide
• Tips on Choosing a Good Domain Name
• How to Create a Search Engine Friendly Website
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• How to Design and Publish Your Website with Nvu (free WYSIWYG web editor)

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

How to Centre a Table Using CSS in Nvu and KompoZer