Categories
alignment css html html-table

Set cellpadding and cellspacing in CSS?

3583

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?

3

  • 9

    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


  • 2

    Use border-spacing on table and padding on td.

    – Anubhav

    May 23, 2017 at 9:17

  • 2

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

    Aug 13, 2021 at 16:43

3799

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.

10

  • 33

    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.

    Aug 25, 2011 at 3:01

  • 7

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

    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.

    Dec 16, 2013 at 6:27

  • 4

    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.

    Apr 1, 2015 at 20:41


1010

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.

5

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

    Oct 30, 2020 at 19:03

366

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

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

1

  • 22

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

    – TRiG

    Jul 25, 2012 at 14:08