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.

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 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.

Pages In The Template Tutorial

Return from Making A CSS Table Border to the Web Template Tutorial Overview