# How to set cell padding and cell spacing in CSS

**URL:** https://sentry.io/answers/how-to-set-cell-padding-and-cell-spacing-in-css/

---

## The Problem

You have a table such as the table shown below:

```html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>Jessie</td>
    <td>22</td>
    <td>Brazil</td>
  </tr>
  <tr>
    <td>Luke</td>
    <td>30</td>
    <td>England</td>
  </tr>
  <tr>
    <td>Samantha</td>
    <td>24</td>
    <td>Cambodia</td>
  </tr>
</table>
```

The [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) elements, which define the cells of the table that contain data, have a border so that you can see the table cells:

```css
td {
  border: 1px solid black;
}
```

How do you set the padding inside the cells and the spacing between the cells?

## The Solution

To set the cell padding, set the padding of the `<td>` elements:

```css
td {
  padding: 1rem;
}
```

To set the spacing between cells, set the [`border-spacing`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) property of the `<table>` element:

```css
table {
  border-spacing: 30px;
}
```

Note that `border-spacing` does not have any effect if the [`border-collapse`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) property of the `<table>` element is set to "collapse". The `border-collapse` property determines whether the cells share borders or have separate borders. When set to "collapse", the cells share borders.

---

*Source: [sentry.io/answers/how-to-set-cell-padding-and-cell-spacing-in-css/](https://sentry.io/answers/how-to-set-cell-padding-and-cell-spacing-in-css/)*