CSS border-spacing (Set Space between Adjacent Cells)

The CSS border-spacing property is used to define space between adjacent cells border. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {border: 2px solid maroon;}
      table#xyz {border-spacing: 10px;}
   </style>
</head>
<body>

   <h2>Without border-spacing</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>Course</th>
      </tr>
      <tr>
         <td>Tobias</td>
         <td>VFX and Animation</td>
      </tr>
      <tr>
         <td>Jonas</td>
         <td>Cyber Security</td>
      </tr>
      <tr>
         <td>Elias</td>
         <td>Hardware and Networking</td>
      </tr>
   </table>

   <h2>With border-spacing</h2>

   <table id="xyz">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Tobias</td>
         <td>Cologne</td>
      </tr>
      <tr>
         <td>Jonas</td>
         <td>Munich</td>
      </tr>
      <tr>
         <td>Elias</td>
         <td>Hamburg</td>
      </tr>
   </table>
   
</body>
</html>

Output

Without border-spacing

Name	Course
Tobias	VFX and Animation
Jonas	Cyber Security
Elias	Hardware and Networking

With border-spacing

Name	City
Tobias	Cologne
Jonas	Munich
Elias	Hamburg

CSS border-spacing Syntax

The syntax of border-spacing property in CSS, is:

border-spacing: x;

The value of x should be any of the following:

length - used to define the required space around the adjacent borders of table cells
initial - used to define the space using default value
inherit - used to define the space using the value inherited by its parent

CSS border-spacing with Two Values

When two values given to border-spacing, then first value applies to horizontal, whereas the second value applies to vertical spacing. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      table, td {border: 2px solid maroon;}
      table#abc {border-spacing: 10px;}
      table#xyz {border-spacing: 10px 40px;}
   </style>
</head>
<body>

   <table id="abc">
      <tr>
         <th>Name</th>
         <th>Course</th>
      </tr>
      <tr>
         <td>Noah</td>
         <td>Microsoft Office and Typing</td>
      </tr>
      <tr>
         <td>Leon</td>
         <td>Software Engineering</td>
      </tr>
      <tr>
         <td>Paul</td>
         <td>Web Designing</td>
      </tr>
   </table>

   <br/>

   <table id="xyz">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Noah</td>
         <td>Nuremberg</td>
      </tr>
      <tr>
         <td>Leon</td>
         <td>Frankfurt</td>
      </tr>
      <tr>
         <td>Paul</td>
         <td>Dresden</td>
      </tr>
   </table>
   
</body>
</html>

Output

Name	Course
Noah	Microsoft Office and Typing
Leon	Software Engineering
Paul	Web Designing

Name	City
Noah	Nuremberg
Leon	Frankfurt
Paul	Dresden

CSS Online Test

« Previous Tutorial Next Tutorial »