 |
|
Using CSS To Set HTML Table Styles
This page tells how to set the table styles in 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 Table With CSS
I size my tables to
suit
a monitor with an 800 pixel wide resolution because many people still
use
that. Then I center the table because it looks a lot better than being
left aligned when someone is using a much higher resolution.
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'lll
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 pallette 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/.)
Setting The Table's Background Color
We'll also use the center
table class to set the background color of the combination CSS HTML table. If
you've closed the CSS editor open it again, and click on .center table in
the left pane.
Then
click on background in the top CSS menubar. Click on the box at the
left of the Color text box, and you'll get a color chart to choose an
appropriate color from.
Just remember if you want happy visitors, a light background with dark
text is best.
Setting The Font Size
I found I needed to
set a font size in the tables. Just select Text in the
menubar, then set the font size at 1em, or whatever suits your site.
You can set left alignment at the same time.
Return
from CSS HTML Table
to Creating A Website
Template
|
|
