border-collapse - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-collapse

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-collapse

Description

The border-collapse CSS property specifies whether the cell borders of a table are collapsed in a single border or separated as usual.

In the collapsing borders model, adjacent table cells share borders.

The following table summarizes the usages context and the version history of this property.

Item Value
Default value: separate
Applies to:The table and inline-table elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 

border-collapse:      separate | collapse | initial | inherit

Property Values

The following table describes the values of this property.

ValueDescription
separate Selects the separated borders model. Default value.
collapse Selects the collapsing borders model.
initial Sets this property to its default value.
inherit takes the value of its parent element border-collapse property.

The example below shows the border-collapse property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-collapse property</title>
  <style type="text/css">
    table {<!--from w  ww .jav a 2 s. c o m-->
      border-collapse: collapse;
    }
    table, th, td {
      border: 1px solid black;
    }
    </style>
 </head>
 <body>
  <table>
   <tbody>
    <tr>
     <th>Name</th>
     <th>Email</th>
    </tr>
    <tr>
     <td>Alax</td>
     <td>a@example.com</td>
    </tr>
    <tr>
     <td>Joy</td>
     <td>b@example.com</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Related Tutorials