border-spacing - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-spacing

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

Description

The border-spacing CSS property sets the spacing between the borders of adjacent table cells.

The following table summarizes the border-spacing Property.

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

Syntax

The syntax of the property is as follows: 


border-spacing:      [ length ] 1 or 2 values | initial | inherit
  • If one value is specified, it applies to both the horizontal and vertical border spacing.
  • If two values are specified, the first sets the horizontal border spacing, and the second sets the vertical border spacing.

Property Values

The following table describes the values of border-spacing Property.

Value Description
length A length value in px, pt, cm, em, etc. Negative values are not allowed.
initial Sets this property to its default value.
inherit take the value of its parent element border-spacing property.

The example below shows the border-spacing property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS border-spacing property</title>
  <style type="text/css">
    table {<!--  w  w  w . ja va 2s.com-->
        border-collapse: separate;
    }
    table, th, td {
        border: 1px solid black;
    }
    table.one {
        border-spacing: 25px;
    }
    table.two {
        border-spacing: 10px 20px;
    }
</style>
 </head>
 <body>
  <table class="one">
   <tbody>
    <tr>
     <th>Name</th>
     <th>Email</th>
    </tr>
    <tr>
     <td>Tom</td>
     <td>e@mail.com</td>
    </tr>
   </tbody>
  </table>

  <br>
  <table class="two">
   <tbody>
    <tr>
     <th>Name</th>
     <th>Email</th>
    </tr>
    <tr>
     <td>Mary Smith</td>
     <td>asdf@mail.com</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Related Tutorials