Sentry Answers>HTML>

How to set cell padding and cell spacing in CSS

How to set cell padding and cell spacing in CSS

Matthew C.

The ProblemJump To Solution

You have a table such as the table shown below:

Click to Copy
<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> elements, which define the cells of the table that contain data, have a border so that you can see the table cells:

Click to Copy
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:

Click to Copy
td { padding: 1rem; }

To set the spacing between cells, set the border-spacing property of the <table> element:

Click to Copy
table { border-spacing: 30px; }

Note that border-spacing does not have any effect if the 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.

  • ResourcesWhat is Distributed Tracing
  • logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.


Loved by over 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.