Centering a CSS HTML Table

This page tells how to center the CSS HTML table that we're using for our web template.

It's part of a tutorial on how to create a web template using an HTML table to control the layout, CSS for the styles, and virtual includes for easy updates of multiple pages at once.

Centering Your HTML Table With CSS

I think in these days of wide screen monitors and high resolutions a centered website page looks better than a left aligned page that may only cover half a screen.

You can center your template using html, but it is easy to do using CSS so I'll show how to do that. The beauty of using a combination CSS HTML table for your template is that it is so easy to change the table styles if you ever need to.

You'll need to set two different class styles, one for up-to-date browsers, and one for earlier browsers that have more limited CSS capability.

The first class style we'll call center.

Fire up KompoZer, open your web template, click on Tools at the top of the page, then CSS editor.  Click on the palette icon at the extreme left of the CSS editor's top menubar. In the right pane you should now see New Style Rule. Select style applied to all elements of class.

In the text box below a dot will appear. Type "center"  (without the quote marks) after the dot so it says .center 

Then click on the Create Style Rule button directly below. Now .center is our new class. All we're doing with this is to set the text alignment to center the table for some browsers that aren't very CSS compliant.

So click on text  in the CSS editor's top menubar, then in the options that appear go to alignment and select center.  Then click okay.

That's it for the first part of centering the CSS HTML table.

The next class style we'll call "center table".  We'll use this to center tables in CSS compliant browsers. Follow the directions above to get to style applied to all elements of class. Then in the text box after the dot type "center table" (without the quote marks) so it says .center table

Click Create Style Rule. The correct way to center tables with CSS is to set margin left and margin right to auto.  So select Box in the top menubar, and in the options that appear find the margins combo boxes. (A combo box is a combination of a text box with a drop down menu).

In the right and left combo boxes select auto from the drop down menus.

Then go to Text in the top menubar and in the alignment combo box select left. That is because some browsers will center the text as well as the table, so we need to realign text back to the left.

That's it for the second part of centering the CSS HTML table.

(I got this method of centering tables with CSS from theodorakis.net/.)

Linking To The .Center Style Rule

This style rule won't work until you link to it in the HTML source code of your website template. You'll need to wrap a <div> command around the table.

To do that open up the source code by clicking on Source at the bottom of the KompoZer page. Then in the source code type <div class="center">  directly below where it says <body>.

First part of the <div> command to link to the .center style

To finish the <div> command you'll need to type </div> directly before the </body> tag near the bottom of the source code.

Finishing the <div> command to center the HTML table

That's it for centering the table in this combination CSS HTML table template.

Aligning Your Other Tables

I use tables inside my content table to put images together with a caption, or for Google ads or anything else I might want them for. I have an explanation of how to do it on the page about web page images.

If you use CSS to center your main table as we've just done, every other table on your page will also be centered. To get the other tables where you want them you'll have to use another CSS class which I'm calling align table.

Fire up KompoZer's CSS editor again and create a class called .align table, just as you did for .center. Go to Box in the top menubar, and set the left and right margins to around 1 px.

Then before the opening <table> tag of any other table you use inside your content table, write  <div class="align table">

After the closing </table> tag for the same table, write </div>

Now you should be able to align the table how you want with text wrapped to one side.  See how to do it in web page images.

If it doesn't work, try using the up and down arrows in the CSS editor's top menu bar to move the align table class up the row of styles in the left pane, then down again. For some reason, that can get it working.

Putting The Table At The Top Of The Page

You may notice that your main table sits slightly below the top of the page. If you want to raise it right to the top select body in the left pane of the CSS editor, then the box tab in the top menubar. Go to Margins and set the top margin to 0 pixels.

If you want the table down slightly from the top of the page you can use the top margin command to set the gap quite precisely. Just set however many pixels gap you want.

Changing To An External Style Sheet

You'll have noticed all the CSS styles listed towards the top of the source code. Later on in this template tutorial we'll change them to an external style sheet so they'll be in a separate file and we'll just have a short link at the top of the source code linking to the file. That's quite easy to do.

Next Page: How to put a border around your web page


Pages In The Template Tutorial



Return from CSS HTML Table to the Website Template Overview

Return to the Building A Web Site home page