By kokos


2008-12-04 08:45:47 8 Comments

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

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

How can the same be accomplished using CSS?

27 comments

@Greggo 2019-11-17 05:09:20

I suggest this and all the cells for the particular table are effected.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

@Rafiqul Islam 2017-08-02 09:52:32

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.

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>
      <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>

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 */
}
<!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>

@MD Ashik 2016-11-02 06:58:13

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

For cell-padding:

Just call simple td/th cell padding.

Example:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

For cell-spacing

Just call simple table border-spacing

Example:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

More table style by CSS source link here you get more table style by CSS.

@user6781634 2016-09-05 07:25:41

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

@Pushp Singh 2016-06-03 12:03:26

For tables, cellspacing and cellpadding are obsolete in HTML 5.

Now for cellspacing you have to use border-spacing. And for cellpadding you have to use border-collapse.

And make sure you don't use this in your HTML5 code. Always try to use these values in a CSS 3 file.

@Majid Sadr 2014-12-24 13:33:01

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    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.

@Elad Shechter 2014-04-28 15:08:06

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

I had this style in my reset.css file:

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 */
}

@Dan 2014-01-03 03:12:02

Just use border-collapse: collapse for your table, and padding for th or td.

@RolanDecoy 2012-07-02 13:43:15

From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.

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;...

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.

@Alfabravo 2012-10-11 15:24:39

OP never stated what was he using table for.

@Robert White 2012-06-19 14:57:56

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:

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>

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.

@vapcguy 2015-02-26 05:25:24

I wish I could upvote more... First example that didn't repeat the others and one that shows how to limit the effect to a single table or cell, instead of to all of them on the page!!!

@user669677 2012-06-12 10:24:17

Default

The default behavior of the browser is equivalent to:

table {border-collapse: collapse;}
td    {padding: 0px;}

         Enter image description here

Cellpadding

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

table {border-collapse: collapse;}
td    {padding: 6px;}

        Enter image description here

Cellspacing

Controls the space between table cells

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

        Enter image description here

Both

table {border-spacing: 2px;}
td    {padding: 6px;}

        Enter image description here

Both (special)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        Enter image description here

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.

@Kaz 2013-11-19 01:14:25

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 2013-11-19 18:07:12

@2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work this way with these CSS attributes.

@user669677 2013-11-20 09:59:05

@Kaz You might need use negative margin to hide that annoying part.

@Jan M 2014-11-05 15:40:49

The default padding on TD is typically 1px, not 0

@Malvineous 2011-08-20 03:32:59

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.

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;
}

@Alireza 2017-06-09 16:58:06

You can simply do something like this in your CSS, using border-spacing and padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

@dgrogan 2017-09-06 19:49:15

The border-spacing rule is ignored when borders are collapsed.

@fuddin 2016-07-03 13:33:59

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle.

@Abhishek Singh 2014-01-08 18:16:33

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

@vapcguy 2015-02-26 05:30:28

How about adding the style directly to the table itself? This is instead of using table in your CSS, which is a BAD approach if you have multiple tables on your page:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

@Teepeemm 2015-03-28 02:53:56

Putting "style" in the table tag is worse than putting "table#someId" in your css, since styling should get separated from content. But the main point of the question is how to convert the deprecated html into proper css. Which you've correctly done, but you've not really added anything with your answer, and are focusing on an unrelated issue.

@vapcguy 2015-03-28 03:03:50

Nothing added?! What I added was to focus on how every other answer here basically says to use td { padding: ... } or table { border-spacing: ... } , instead of applying it directly to the table. Those add nothing. As I said, when you have multiple tables on your page & don't want to affect them, you don't want to this! We don't need a whole page of answers saying "Use the stylesheet!", when maybe that's the last thing you want, because you only want formatting for one cell or table. That's when applying it to table or td is undesirable & creating a whole new class for it is overkill.

@Teepeemm 2015-03-28 04:09:15

Every other answer uses a stylesheet because the original question was "how can I do this with css". If the question had been "how can I have css affect only this one table", then your answer would be more appropriate (although I would still favor table#someId).

@vapcguy 2015-04-01 00:15:29

Technically, inline styling is still CSS, just not using a stylesheet, but I get your point.

@developerbmw 2015-04-09 21:51:21

How about just adding a class to the table?

@vapcguy 2015-04-11 08:13:20

Because the idea behind a class is for reusability. For a one-off, that makes little sense and is overkill, IMHO.

@vapcguy 2017-01-12 17:10:13

Downvoter, care to explain? For other comments favoring table or td in the stylesheet, I still see that as bad practice. If you only have 1 table you want to affect, as I did when I Googled this, that is the last thing you want & why I posted this. Just because usually you want all the tables to look exactly the same doesn't mean it's always appropriate, as I had a case where it wasn't, due to the data being displayed took up a disproportionate amount of room than my other tables & so needed a different padding amount. People need to think outside the box & about other use cases.

@Adam 2017-05-15 08:10:54

Inline CSS is always a bad idea. If you want to style a unique table, then gives it an id attriubute and use it in the CSS :table#id {border-collapse: separate;border-spacing: 2px;} table#id td {padding: 4px 4px;}

@vapcguy 2017-05-18 18:16:00

Inline is always bad? What? To me, your response just repeats all the other BAD answers here. The stylesheet is meant for all-encompassing objects, not one-offs, so to stick it in the stylesheet, to me, THAT would be a bad practice. You don't want to have to do a lot of scrolling back and forth to your stylesheet and back to your one-off table to verify you got things right and fix/add stuff, when you can do it right there. Not to mention someone after you having to search your solution for that one ID you have in the stylesheet. Nothing wrong applying a single style set to a single table.

@suraj rawat 2014-03-15 22:33:41

Simply use CSS padding rules with table data:

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.

@suraj rawat 2014-02-27 09:03:37

CSS:

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

@Eric Nguyen 2010-07-09 02:34:02

Basics

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

td { 
    padding: 10px;
}

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

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.

@whitneyland 2011-08-25 03:01:32

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.

@Kzqai 2011-10-24 17:16:03

That certainly makes sense due to css specificity, so you may need to apply the styles to a css id for maximum specificity. Not sure that'll override attribute values in all cases, but it's the place to start checking.

@Martin Ørding-Thomsen 2011-11-29 10:09:23

@LeeWhitney you need to set padding: 0 on your table cells.

@Ignas2526 2013-11-22 19:10:49

It's little bit off topic, but cellpadding and cellspacing attributes are removed in HTML5, so CSS is the only way to go now.

@Eric Nguyen 2013-12-16 06:27:40

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.

@vapcguy 2015-02-26 05:21:39

This is NOT a good answer. It says add this CSS, which will apply it to all of the tables and cells on the page. What if you have multiple tables on a page, and want different cellpaddings or cellspacing for each of them?

@Eric Nguyen 2015-04-01 20:41:05

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.

@Rolf 2015-06-06 02:12:11

Padding is not the same by default. For example if your table cell has a background color, then the padding will also include that background. Not exactly "cell spacing". That's why it's called "padding". Naturally margin should work on table cells, but it doesn't, and i'm not the one who broke it.

@Martha 2018-12-05 00:21:29

Note that border-collapse:collapse is NOT equivalent to cellspacing="0". The former results in a single line between cells, while the latter results in two lines between cells.

@Falguni Panchal 2013-06-14 05:51:42

Try this:

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;
}

@Håkan Nilsson 2013-02-14 15:41:57

I used !important after the border-collapse like

border-collapse: collapse !important;

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

@Jukka K. Korpela 2013-05-30 10:37:50

!important would only be needed to override other CSS settings in a complex situation (and even then mostly a wrong approach).

@vapcguy 2015-02-26 05:26:58

Also a repeat of Dan's answer, just adds the !important, which could have been included as a comment instead of another answer.

@Vitalii Fedorenko 2011-12-05 04:30:39

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

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 evaluated.

@ptim 2013-09-14 05:42:18

for those attempting responsive emails, note that * is not recognized by outlook 2007+ (uses word as a render engine) campaignmonitor.com/css

@corrector 2010-02-26 11:25:10

TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...

Anyone else suggesting margins on <td>'s obviously has not tried this.

@Kzqai 2011-11-15 16:49:33

They are actually deprecated in html5.

@Will Prescott 2008-12-04 09:18:10

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.

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.

@John K 2010-07-09 02:36:05

In today's age that reality is suckage to the Nth degree.

@Eric Nguyen 2010-07-09 02:36:35

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.

@user6516765 2017-02-14 13:29:42

To be honest, who cares about Internet Explorer? Anyone who uses it should know broken websites are their fault - for using such a low-quality browser. Websites shouldn't have to deal with this. Let Internet Explorer become lost. Forget support for it. We don't need it, and it's a pain to develop for.

@Pup 2009-08-24 15:17:36

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

@Kzqai 2011-11-15 16:50:04

This is actually the only thing that I could get to work for me, although I applied the info to an id to avoid being overly general.

@TRiG 2012-07-25 14:08:04

That's cellspacing=0 equivalent. The equivalent for cellspacing=1 is completely different. See the accepted answer.

@Cole Johnson 2013-01-29 20:13:41

Shouldn't table td and table th just be td and th respectively? It works either way, but a smaller selector means slightly faster matching

@aboveyou00 2013-08-13 03:41:46

@Cole Actually, I think it should be table > tr > td and table > tr > th. This is almost as fast as tr and th, and it is guaranteed to work if you have a nested table. Just my 2c

@Cole Johnson 2013-08-13 03:43:40

@aboveyou00 but is the table selector needed? IIRC, a <td> is invalid unless inside a <tr>.

@aboveyou00 2013-08-13 03:52:53

@Cole Yes, but there could be another table nested somewhere within a table cell. Unless you give a specific class to the cells on a single table, you can't apply a rule to just the outer table.

@George Filippakos 2011-12-08 16:04:01

The simple solution to this problem is:

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

@mat 2008-12-04 09:06:50

Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.

Related Questions

Sponsored Content

103 Answered Questions

[SOLVED] How to horizontally center a <div>

44 Answered Questions

[SOLVED] How to disable text selection highlighting

47 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 956844 View
  • 1993 Score
  • 47 Answer
  • Tags:   css css-transitions

30 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2484341 View
  • 2656 Score
  • 30 Answer
  • Tags:   javascript html dom

18 Answered Questions

[SOLVED] How do CSS triangles work?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1513185 View
  • 2217 Score
  • 28 Answer
  • Tags:   html css opacity

35 Answered Questions

[SOLVED] Add table row in jQuery

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1859054 View
  • 2995 Score
  • 31 Answer
  • Tags:   css css-selectors

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 916875 View
  • 1748 Score
  • 31 Answer
  • Tags:   html css html-table

30 Answered Questions

[SOLVED] Convert HTML + CSS to PDF with PHP?

Sponsored Content