CSS table border - Border style


Home - Tutorials - CSS tutorials

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:165748

Bookmark CSS table border



AddThis Social Bookmark Button

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:
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. table { border: 1px solid #666666; }
  5. -->
  6. </style>
  7. </head>

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:
  1. table {
  2. border-style: solid;
  3. border-width: 1px;
  4. border-color: #666666;
  5. }

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:
  1. table {
  2. border-style: solid;
  3. border-top-style: none;
  4. border-width: 1px;
  5. border-color: #666666;
  6. }
  7.  

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:

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

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

So at the moment our table looks like this:

Th-1Th-2Th-3
cell-11cell-12cell-13
cell-21cell-22cell-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:
  1. table { border: 1px solid #666666; }
  2. td { border: 1px solid #666666; }
  3. th { border: 1px solid #666666; }
  4.  

With this changes our table is even better.

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

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




Previous Step of CSS table borderNext 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


Host Addon Ltd

F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows F1

Total time: 0.3197