 |
|
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 won't suit every web site,
but there are times when you might want one.
Example of a web page with a CSS table
border
made using the template developed in this tutorial. The
border
and navbar colors were chosen to match the corporate colors.
|
Using CSS to make table borders isn't entirely straight-forward. The
CSS
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'll use for the table border.
Making The Borders
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.
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.
Setting the table borders for
about-armidale.com. All 4 borders are the same, 3 px silver.
Set
the borders for your template to whatever suits your web site. There
are a number of different styles you can use as well as different
widths and colors.
If you decide later that you want to change the style, or delete
the border entirely its very easy. To delete the table border just change the
style to none.
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 Class
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. Class commands such as the
table border commands we made need
more help.
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". You'll learn how to do it in linking
to CSS classes but first go to the next page.
Next Page:
How to link your
template to the CSS commands.
Return
from Making A CSS Table
Border to the Web
Template Tutorial Overview
|
|
