CSS table border - Border style

In this article I will demonstrate how you can use effectively CSS table borders to style your html tables.

Tutorial info:

Name:	CSS table border
Total steps:	3
Category:	CSS tutorials
Date:	2007-11-09
Level:	Beginner
Product:	See complete product
Viewed:	158416

Bookmark CSS table border

Step 2 - Border style

CSS table border

To make our basic table more attractive we will use CSS and change table and cell borders.

In this example we will insert CSS code into the same document, so our <head> content will be the following:

Code: 
<head>
  <style type="text/css">
  <!--
    table { border: 1px solid #666666; }
  -->
  </style>
</head>
CSS F1

As you can see in the code above we redefined the default settings of the table element. It means that all table in this document will look the same. This is great for those who want good-looking websites, similar to to the high quality designs of Google, or o2.co.uk, and it's very easy to implement and make use of.

Now let's see what this CSS mean exactly. We can translate it to something similar:

Setup a simple 1px width continuous border with a gray color for all tables.

The above example is a shortcut of the following CSS code:

Code: 
table {	
   border-style: solid; 
   border-width: 1px;
   border-color: #666666;
}
CSS F1

Ok, nice but what if you don't want a border for example on the top of the table? It is also quite simple with CSS border styles:

Code: 
table {	
   border-style: solid; 
   border-top-style: none;
   border-width: 1px;
   border-color: #666666;
}
 
CSS F1

As you can see you can modify all of the 4 borders separately.

The color and border width property are quite straightforward, but the CSS border style can have various predefined values. These are the followings:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Here I have to mention that CSS border width property has some predefined values as well:

thin
medium
thick

However these are not so commonly used as the border styles.

So at the moment our table looks like this:

Th-1	Th-2	Th-3
cell-11	cell-12	cell-13
cell-21	cell-22	cell-23

Now it's time to make some more border. So the next step is to add border to the cell elements (td tags and th tags) as well. It is the same as in case of the table border:

Code: 
table {	border: 1px solid #666666; }
td { border: 1px solid #666666; }
th { border: 1px solid #666666; }
 
CSS F1

With this changes our table is even better.

Th-1	Th-2	Th-3
cell-11	cell-12	cell-13
cell-21	cell-22	cell-23

In the next step we will further refine our table design.

Previous Step of CSS table border Next Step of CSS table border

Tags: CSS table border, css table, css border, table border, css, table, border

CSS table border - Table of contents
Step 1 - Introduction
Step 2 - Border style
Step 3 - CSS border collapse

CSS F1

Help in CSS, get CSS code, scripts, tutorials

CSS table border - Border style

Tutorial info:

Bookmark CSS table border

Step 2 - Border style