6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS?

- Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

Set cellpadding and cellspacing in CSS?

Asked 15 years, 6 months ago Modified 3 months ago Viewed 2.7m times

In an HTML table, the cellpadding and cellspacing can be set like this:

3698 <table cellspacing="1" cellpadding="1">

How can the same be accomplished using CSS?

html css html-table alignment

Share Improve this question Follow edited Jun 6, 2018 at 19:40 asked Dec 4, 2008 at 8:45
lat94 kokos
521 1 5 20 43.4k 5 36 32

11 Just a general suggestion, check to see if your style.css does a "reset" on your tables before trying these
solutions. Example: If you don't have tables set to width:auto then border-collapse might not work
as expected. – PJ Brunet Sep 1, 2016 at 7:12

3 Use border-spacing on table and padding on td. – Anubhav May 23, 2017 at 9:17

6 "Oh, dang, back in the olden days I did this with cellpadding and cellspacing ... what is that in CSS
again?" –me, pretty much every time I need to do this. – Robert J. Walker Aug 13, 2021 at 16:43

19 Answers Sorted by: Highest score (default)

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of
3886
"cellpadding":

td, th { /* table cells */

padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of
"cellspacing":

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 1/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

table {
border-spacing: 10px;
border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do
with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through
Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still
support the border-collapse property, which merges the borders of adjoining table cells. If
you're trying to eliminate cellspacing (that is, cellspacing="0" ) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it
does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For
Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't
have it defined already), you can use border-collapse:collapse .

table {
border-spacing: 0;
border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which
browsers, see this fantastic Quirksmode page.

Share Improve this answer Follow edited Feb 28 at 14:11 answered Jul 9, 2010 at 2:34
Crissov Eric Nguyen
1,029 12 17 40.5k 4 26 32

34 cellpadding="0" can still make a difference in Chrome 13.0.782.215, even if border-collapse:collapse and
border-spacing are applied to the table. – Lee Whitney III Aug 25, 2011 at 3:01

7 @LeeWhitney you need to set padding: 0 on your table cells. – Martin Ørding-Thomsen Nov 29, 2011 at
10:09

11 It's little bit off topic, but cellpadding and cellspacing attributes are removed in HTML5, so CSS is the only
way to go now. – Ignas2526 Nov 22, 2013 at 19:10

16 Hi, all. I've updated the answer for clarity, including a section on cellpadding, which I'd thought was
obvious (just use "padding"). Hope it's more useful now. – Eric Nguyen Dec 16, 2013 at 6:27

5 True, @vapcguy, in any of the infinitely variable other situations you may be styling a table in, you will
need to define more specific selectors. The above are marked as examples. – Eric Nguyen Apr 1, 2015 at
20:41

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 2/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

Default
The default behavior of the browser is equivalent to:
1029
table {border-collapse: collapse;}
td, th {padding: 0px;}

Cellpadding
Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;}

td, th {padding: 6px;}

Cellspacing
Controls the space between table cells

table {border-spacing: 2px;} td, th {padding: 0px;}

Both

table {border-spacing: 2px;}

td, th {padding: 6px;}

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 3/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

Both (special)

table {border-spacing: 8px 2px;}

td, th {padding: 6px;}

Note: If there is border-spacing set, it indicates border-collapse property of the table

is separate .

Try it yourself!

Here you can find the old HTML way of achieving this.

Share Improve this answer Follow edited Feb 28 at 11:04 answered Jun 12, 2012 at 10:24
Harrison user669677
2,122 11 17 27

1 How is the spacing around the table disappearing? When I set "border-spacing: 8px 12px, it adds the
spacing not just between, but between the table border and the outside cells! But that is not depicted in
the images here; they are flush left. – Kaz Nov 19, 2013 at 1:14

1 @2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work
this way with these CSS attributes. – Kaz Nov 19, 2013 at 18:07

@Kaz You might need use negative margin to hide that annoying part. – user669677 Nov 20, 2013 at 9:59

2 The default padding on TD is typically 1px, not 0 – Jan M Nov 5, 2014 at 15:40

Beware: border-spacing:horizontal vertical; whereas, for example, padding:vertical

horizontal; . – Adam Chalcraft Oct 30, 2020 at 19:03

table
{

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 4/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

371 }
border-collapse: collapse; /* 'cellspacing' equivalent */

table td, table th

{
padding: 0; /* 'cellpadding' equivalent */
}

Share Improve this answer Follow edited Jul 23, 2013 at 20:46 answered Aug 24, 2009 at 15:17
Hemerson Varela Pup
25.1k 18 71 69 10.4k 6 45 68

24 That's cellspacing=0 equivalent. The equivalent for cellspacing=1 is completely different. See the
accepted answer. – TRiG Jul 25, 2012 at 14:08

Setting margins on table cells doesn't really have any effect as far as I know. The true CSS
equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
125
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for
any other value I think the only cross-browser way is to keep using the cellspacing attribute.

Share Improve this answer Follow edited Aug 2, 2013 at 20:34 answered Dec 4, 2008 at 9:18
Peter Mortensen Will Prescott
1 4,053 2 18 15

51 In today's age that reality is suckage to the Nth degree. – John K Jul 9, 2010 at 2:36

8 This is almost correct, but border-collapse only works in IE 5-7 if the table doesn't already have a
cellspacing attribute defined. I've written a comprehensive answer that merges all the correct parts of
the other answers on this page in case that's helpful. – Eric Nguyen Jul 9, 2010 at 2:36

This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:

112 table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {

padding: 10px; /* cellpadding */
}

The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.

expression('separate', cellSpacing = '10px') returns 'separate' , but both statements are

run, as in JavaScript you can pass more arguments than expected and all of them will be
https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 5/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

evaluated.

Share Improve this answer Follow edited Oct 29, 2013 at 17:17 answered Dec 5, 2011 at 4:30
James Donnelly Vitalii Fedorenko
128k 35 212 222 113k 29 150 111

For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only
able to test it in Firefox.
74
See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with
older Internet Explorer versions.

table {
border-collapse: separate;
border-spacing: 2px;
}

Share Improve this answer Follow edited Apr 7, 2019 at 9:55 answered Aug 20, 2011 at 3:32
Peter Mortensen Malvineous
1 26.5k 18 122 157

The simple solution to this problem is:

57 table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}

Share Improve this answer Follow edited Jul 23, 2013 at 20:45 answered Dec 8, 2011 at 16:04
Hemerson Varela George Filippakos
25.1k 18 71 69 16.5k 15 82 93

Also, if you want cellspacing="0" , don't forget to add border-collapse: collapse in your
table 's stylesheet.
55
Share Improve this answer Follow answered Dec 4, 2008 at 9:06
mat
13.2k 5 43 45

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 6/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap
every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
47
So the CSS will be,

div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}

<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>

Run code snippet Expand snippet

Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with
Internet Explorer, because that's all we're allowed to use at work.

Share Improve this answer Follow edited Apr 7, 2019 at 9:58 answered Jun 19, 2012 at 14:57
Peter Mortensen Robert White
1 711 6 12

This style is for full reset for tables - cellpadding, cellspacing and borders.

I had this style in my reset.css file:

26
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet
Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 7/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

Share Improve this answer Follow edited Apr 7, 2019 at 10:01 answered Apr 28, 2014 at 15:08
Peter Mortensen Elad Shechter
1 4,005 1 23 22

TBH. For all the fannying around with CSS you might as well just use cellpadding="0"
cellspacing="0" since they are not deprecated...
22
Anyone else suggesting margins on <td> 's obviously has not tried this.

Share Improve this answer Follow edited Oct 15, 2013 at 23:54 answered Feb 26, 2010 at 11:25
Josh Crozier corrector
238k 56 399 311 325 2 2

37 They are actually deprecated in html5. – Kzqai Nov 15, 2011 at 16:49

Simply use CSS padding rules with table data:

19 td {
padding: 20px;
}

And for border spacing:

table {
border-spacing: 1px;
border-collapse: collapse;
}

However, it can create problems in older version of browsers like Internet Explorer because
of the diff implementation of the box model.

Share Improve this answer Follow edited Jul 2, 2014 at 20:32 answered Mar 15, 2014 at 22:33
Peter Mortensen Suraj Rawat
1 3,725 24 33

From what I understand from the W3C classifications is that <table> s are meant for displaying
data 'only'.
17
Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have
a table with data floating over it using position: absolute; and background: transparent; ...

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 8/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).

Margins are used (or meant anyways) to create a spacer between container elements, like
<table> , <div> and <form> , not <tr> , <td> , <span> or <input> . Using it for anything other
than container elements will keep you busy adjusting your website for future browser updates.

Share Improve this answer Follow edited Apr 7, 2019 at 9:59 answered Jul 2, 2012 at 13:43
Peter Mortensen RolanDecoy
1 195 1 3

CSS:

15 selector{
padding:0 0 10px 0; // Top left bottom right
}

Share Improve this answer Follow edited Jul 2, 2014 at 20:31 answered Feb 27, 2014 at 9:03
Peter Mortensen Suraj Rawat
1 3,725 24 33

You can easily set padding inside the table cells using the CSS padding property. It is a valid way
to produce the same effect as the table's cellpadding attribute.
14
table,
th,
td {
border: 1px solid #666;
}

table th,
table td {
padding: 10px;
/* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>

</head>

<body>

<table>
<thead>

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 9/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

</body>
</html>

Run code snippet Expand snippet

Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent
table cell borders like the cellspacing attribute. However, in order to work border-spacing the
value of border-collapse property muse be separate, which is default.

table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}

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

table th,
table td {
padding: 5px;
/* Apply cell padding */
}

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 10/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>

</head>

<body>

<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

</body>
</html>

Run code snippet Expand snippet

Share Improve this answer Follow edited Apr 7, 2019 at 10:09 answered Aug 2, 2017 at 9:52
Peter Mortensen Rafiqul Islam
1 941 11 14

Try this:

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 11/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

12 table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}

Or try this:

table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}

Share Improve this answer Follow edited Oct 29, 2013 at 17:17 answered Jun 14, 2013 at 5:51
James Donnelly Falguni Panchal
128k 35 212 222 8,921 3 28 33

I used !important after the border-collapse like

10 border-collapse: collapse !important;

and it works for me in IE7. It seems to override the cellspacing attribute.

Share Improve this answer Follow edited Oct 29, 2013 at 17:17 answered Feb 14, 2013 at 15:41
James Donnelly Håkan Nilsson
128k 35 212 222 155 1 4

10 !important would only be needed to override other CSS settings in a complex situation (and even then
mostly a wrong approach). – Jukka K. Korpela May 30, 2013 at 10:37

Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a
HTML5-compliant way. I will show here two methods giving really similar outputs.
9
Two different sets of CSS properties apply to the same HTML markup for the table, but with
opposite concepts:

the first one uses the default value for border-collapse ( separate ) and uses border-
spacing to provide the cellspacing,

the second one switches border-collapse to collapse and uses the border property as the
cellspacing.

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 12/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

In both cases, the cellpadding is achieved by assigning padding:10px to the td s and, in both
cases, the background-color assigned to them is only for the sake of a clearer demo.

First method:

table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}

<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

Run code snippet Expand snippet

Second method:

table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}

<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

Run code snippet Expand snippet

Share Improve this answer Follow answered Feb 27, 2021 at 19:06
MattAllegro
7,009 5 49 56

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 13/14
6/11/24, 6:35 PM html - Set cellpadding and cellspacing in CSS? - Stack Overflow

td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
6 border-collapse: collapse; /* For showing borders in a better shape. */
}

If margin didn't work, try to set display of tr to block and then margin will work.

Share Improve this answer Follow edited Apr 7, 2019 at 10:02 answered Dec 24, 2014 at 13:33
Peter Mortensen Majid Sadr
1 1,041 10 19

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question.
The reputation requirement helps protect this question from spam and non-answer activity.

https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css?rq=1 14/14