 |
|
How To Make A CSS Table Border
This page tells how to use create a CSS table border. It's part of a step by step tutorial
telling how to create a website template that is easy to
customize for your own purposes.
A border around a web page can make it look better, but it's not
entirely straight-forward. The CSS table border command can put borders
around every table on the page which is a bit overpowering, so you'll need
to do extra work to stop that.
Getting Started
I'm using KompoZer for this tutorial, which is a free wysiwyg
web page editor. Previous pages showed you how to create a
CSS class called .center
table that we're using to style our html table.
Start KompoZer, open your web page template and the CSS editor. In the
left pane click
on .center table
or whatever you've called your table style class.
Making The Borders
Example of a web page with a CSS table border
made using the template developed in this tutorial.
|
Click on Borders
in the top menubar.
You can set the four borders the same, or set them individually, which
can be useful if you only want borders on the sides of the table.
The web page shown has all four borders set to a solid green color,
four pixels wide.
Set the borders for your template to whatever suits your web site.
The border and navbar colors on the web page shown were chosen to match
Superair's corporate colors.
Stopping Unwanted Borders On Other Tables
If
you don't do something to stop it, using a css table border like this
will put a border around every table on the page. That includes
the text table in the page layout, the
navbar if it's in a table, pictures that you put in a table, and so on.
You'll need to make another style class to stop this problem.
Open
KompoZer's CSS editor and click on the palette icon at the
left of
the top menubar. Select style
applied to all elements of class in the
right pane, and in the text box below type "borderless table" (without
the quotes) after the dot so you get .borderless table
Click on Create
Style Rule, and in the top menubar click on Borders.
Make sure All four
sides use same border style is ticked and in the combo box
beside Top
where it says unspecified,
select none.
Linking From The HTML Table To The CSS Commands
Most
of the CSS commands you're using will work by saving the CSS file as an
external
file and linking to it in the page header. The table commands need some
more help though.
You'll need to wrap the tables with <div class="myclass">
and </div>
where myclass is the name of the class you made eg "borderless
table".
To learn how to do it, go to how
to link to a CSS class. It will explain it all in more detail.
Return
from Making A CSS Table
Border to Creating
A Customizable Website Template
|
|
