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.
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.
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.
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.
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.
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
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.
of the CSS commands you're using will work by saving the CSS file as an
file and linking to it in the page header. Class commands such as the
table border commands we made need
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.