Skip to content
Related Articles

Related Articles

Which table property specifies the width that should appear between table cells in CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Jun, 2022

In this article, we will see how to specify the width that should appear between table cells. CSS provides the border-spacing property that can be used to set the distance between the borders of neighboring cells in the Table. This property works only when the border-collapse property is set to no-collapse separate.

Syntax:

border-spacing: length|initial|inherit; 

Property values: 

  • length-length: This value is used to set the distance between the borders of adjacent cells. It does not allow negative values. 
  • initial: This value is used to sets the property to its default value.

Example: This example describes the border-spacing property by specifying the width that appears in between the table cell.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeekforGeeks</title>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
            text-align: center;
        }
          
        .geeks {
            border-collapse: separate;
            background-color: none;
            border-spacing: 30px;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2> The border-spacing Property</h2>
          
        <table style="width:70%" class="geeks">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                  
            </tr>
            <tr>
                <td>Anil</td>
                <td>Kumar</td>
                  
            </tr>
            <tr>
                <td>Vikas</td>
                <td>Kumar</td>
                  
            </tr>
            <tr>
                <td>Vishal</td>
                <td>Yadav</td>
                  
            </tr>
        </table>
    </center>
</body>
  
</html>                

Output:

 

Example 2: This example describes the border-spacing property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeekforGeeks</title>
    <style>
        table {
            border-spacing: 10px;
            border: 1px solid green;
        }
          
        td {
            width: 22px;
            height: 25px;
            background: #1d9138;
            color: white;
            text-align: center;
              font-family:sans-serif;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Border-spacing Property</h2>
        <table>
            <tr>
                <td>Geeks</td>
                <td>for</td>
                <td>Geeks</td>
            </tr>
            <tr>
                <td>Geeks</td>
                <td>for</td>
                <td>Geeks</td>
            </tr>
            <tr>
                <td>Geeks</td>
                <td>for</td>
                <td>Geeks</td>
            </tr>
        </table>
    </center>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!