CSS table border - CSS border collapse

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

Bookmark CSS table border

Step 3 - CSS border collapse

CSS table border

Our actual table is looking quite good, but it would be fine if there will be no such "double" border effect but a simple grid.

Unfortunately border-spacing property is not supported by all today's browser we need to edit a bit the html table and set cellspacing to 0. In this case our table code will be:

Code: 
<table cellspacing="0">  
  <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 results the following output.

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

Hmm, it is not really what we want. It seems as a fat border, but we want a simple one.

Fortunately there is a solution and you can remove the cellspacing parameter from your table as well. The magic property is border-collapse. Setting this property to collapse we will get the final result.

So the final code is this:

Code: 
<head>
  <style type="text/css">
  <!--
    table {	
	   border: 1px solid #666666; 
	   width:300px; 
	   border-collapse: collapse;
	}
    td { border: 1px solid #666666;	}
    th { border: 1px solid #666666; }
  -->
  </style>
</head>
 
<body>
<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>
</body>
</html>
 
CSS F1

And our final table looks like this:

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

This is much better than the original, isn't it?

Previous 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 - CSS border collapse

Tutorial info:

Bookmark CSS table border

Step 3 - CSS border collapse