Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set width between table cells with CSS

Javascript Web Development Front End Scripts

The border-spacing CSS property controls the distance between adjacent table cells. It only works when border-collapse is set to separate (the default value).

Syntax

border-spacing: horizontal vertical;
border-spacing: value; /* same for both directions */

Parameters

The property accepts one or two length values:

  • One value: Sets equal spacing horizontally and vertically
  • Two values: First value for horizontal spacing, second for vertical spacing

Example: Basic Border Spacing

<html>
  <head>
    <style>
      table.example {
        border-collapse: separate;
        border-spacing: 10px;
        width: 300px;
      }
      td {
        border: 1px solid #333;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table class="example">
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 3</td><td>Cell 4</td></tr>
    </table>
  </body>
</html>

Example: Different Horizontal and Vertical Spacing

<html>
  <head>
    <style>
      table.custom {
        border-collapse: separate;
        border-spacing: 20px 5px; /* 20px horizontal, 5px vertical */
        width: 350px;
      }
      .custom td {
        border: 2px solid #666;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <table class="custom">
      <tr><td>India</td><td>Delhi</td></tr>
      <tr><td>UK</td><td>London</td></tr>
      <tr><td>USA</td><td>New York</td></tr>
    </table>
  </body>
</html>

Key Points

  • border-spacing only works when border-collapse: separate
  • Values must be length units (px, em, rem, etc.)
  • Negative values are not allowed
  • Default value is typically 2px in most browsers

Comparison

Property Purpose Required Setting
border-spacing Controls space between cells border-collapse: separate
border-collapse: collapse Removes space between cells Ignores border-spacing

Conclusion

Use border-spacing to control the gap between table cells. Remember to set border-collapse: separate for the property to take effect.

Updated on: 2026-03-15T23:18:59+05:30

314 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements