border-collapse

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short informatiom
CSS CSS1
Default value separatecolor
Inherited No
Applied To the tag <Table > or to elements having the quality "display" with value "table" or "inline-table"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Description
This parameter determines how to display borders round table elements. It is used when there is an installed border for cells, then the line of double thickness will turn out in the place of cells joint (fig. 1 a). Addition of value collapse forces a browser to analyse similar places in a table and take away double lines in it (fig. 1b). The same rule is used for outside borders belonging to both cells simultaneously.

Fig.1 Table's view with using the attribute "border-collapse"

Syntax

border-collapse: collapse | separate

Arguments
collapse
There is only one line that is displayed between cells.
separate
There is the border displayed around every cell. In the place where cells contacts, there are two lines at once.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>border-collapse</title>
  <style type="text/css">
   TABLE { 
    width: 300px; /* Table width */
    border: 4px double black; /* Frame around the table */
    border-collapse: collapse; /* Image only  unary lines*/
   }
   TH { 
    text-align: left; /* Left alignment */
    background: #ccc; /* Cells' background color */
    padding: 5px; /* Fields around cells' content */
    border: 1px solid black; /* Border around cells */
   }
   TD { 
    padding: 5px; /* Fields around cells' content */
    border: 1px solid black; /* Border around cells */
   }
  </style>
 </head>
 <body> 
 
  <table cellspacing="0">
   <tr> 
    <th>&nbsp;</th><th>2003</th>
    <th>2004</th><th>2005</th>
   </tr>
   <tr> 
    <td>Oil</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr> 
    <td>Gold</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr> 
    <td>Wood</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table> 
 
 </body>
</html>

The result of this example is shown on the figure 2