HTML Table Spacing

By default, 2px space is set between the table border and cell border, and between two adjacent cell borders. We can change this spacing using CSS border-spacing property.

Assign a valid CSS Length unit to border-spacing, like 10px, 1em, etc.

Examples

Border Spacing of 20px

In the following example, we set the border-spacing of 20px to the table.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
      }
      table {
        border-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML table border spacing, with examples.