Languages
[Edit]
EN

CSS - cellpadding and cellspacing

0 points
Created by:
Kenya-Spears
440

In this article, we would like to show you how to set cell padding and border spacing in CSS.

Quick solution

Cell padding:

td { 
    padding: 10px;
}

Border spacing:

table { 
    border-spacing: 10px;
}

Note:

Default border-spacing value is 2px.

To use border-spacing, the border-collapse property value cannot be set to collapse (default value - border-collapse: separate;).

 

Overview

CSS - cell padding and border-spacing
CSS - cell padding and border-spacing

1. Default values

In this example, we create a table with default border-spacing and padding values for cells.

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      
      table {
        width: 100%;
      }
      
      table, th, td {
        border: 1px solid black;
      }
      
      th, td {
        text-align: left;
      }
      
    </style>
  </head>
  <body style="height: 180px;">

    <h3>Default values</h3>
    <div>border-spacing: 0px; (default)</div>
    <div>padding: 0px; (default)</div>
    <div>&nbsp;</div>

    <table>
      <tr>
        <th>ID</th>
        <th>Username</th>
        <th>User age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Amy</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tom</td>
        <td>27</td>
      </tr>
    </table>

  </body>
</html>

2. Specified border-spacing

In this example, we create a table with specified border-spacing property value for whole table.

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>

      table {
        width: 100%;
        border-spacing: 10px;  /*  <--------------------   */
      }

      table, th, td {
        border: 1px solid black;
      }

      th, td {
        text-align: left;
      }

    </style>
  </head>
  <body style="height: 300px;">

    <h3>Specified border-spacing</h3>
    <div>border-spacing: 10px;</div>
    <div>padding: 0px; (default)</div>
    <div>&nbsp;</div>

    <table>
      <tr>
        <th>ID</th>
        <th>Username</th>
        <th>User age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Amy</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tom</td>
        <td>27</td>
      </tr>
    </table>

  </body>
</html>

3. Specified cell padding

In this example, we create a table with specified padding property value for cells (th, td).

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      table {
        width: 100%;
      }
      table, th, td {
        border: 1px solid black;
      }
      th, td {
        text-align: left;
        padding: 10px;    /*  <--------------------   */
      }
    </style>
  </head>
  <body style="height: 300px;">

    <h3>Specified padding</h3>
    <div>border-spacing: 2px; (default)</div>
    <div>padding: 10px;</div>
    <div>&nbsp;</div>

    <table>
      <tr>
        <th>ID</th>
        <th>Username</th>
        <th>User age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Amy</td>
        <td>25</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tom</td>
        <td>27</td>
      </tr>
    </table>

  </body>
</html>

Related posts

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join