CSS table border


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

Bookmark CSS table border



AddThis Social Bookmark Button

Step 1 - Introduction


CSS table border

To start with this tutorial first create a simple html table with 3 columns and 3 rows. It is quite simple and with it we can check to let's say original condition. So the following HTML code:

Code:
  1. <tr><th>Th-1</th><th>Th-2</th><th>Th-3</th></tr>
  2. <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  3. <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
  4. </table>
  5.  

results a 3x3 table like this:

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

As you can see this is not really what you usually want if you need to display your data in a nicely formatted table. 

Of course you can change the look of the table directly in the table code to make the table a bit bigger and add a visible border to it like this way:

Code:
  1. <table width="300" border="1">
  2. <tr><th>Th-1</th><th>Th-2</th><th>Th-3</th></tr>
  3. <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  4. <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
  5. </table>
  6.  

Which code results the following output:

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

However using CSS we can do it much better without editing our table code.




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


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