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

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
HTML F1
Java F1
JavaScript F1
PHP F1

Total time: 0.3247