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:

Bookmark CSS table border

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: 
<table>
  <tr><th>Th-1</th><th>Th-2</th><th>Th-3</th></tr>
  <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
 
CSS F1

results a 3x3 table like this:

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: 
<table width="300" border="1">
  <tr><th>Th-1</th><th>Th-2</th><th>Th-3</th></tr>
  <tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
  <tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
 
CSS F1

Which code results the following output:

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

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

©2007 CSS F1 - Help in CSS, get CSS code, scripts, tutorials!