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
Return
from CSS HTML Table
to the Website
Template Overview
|
