Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Table Cellpadding and Cellspacing

One problem with tables that the content of one cell can butt right up against the content in another cell. That can make the table data hard to read. Fortunately, this problem is easily addressed with cellpadding and/or cellspacing.

Here’s an example of a table showing fictional (thank goodness) data about the quantity of different animals that were counted Fumblebum County last week:

As you can see, those numbers get a little difficult to read. Imagine a table of data like that with a lot more rows and columns. Now let's look at the exact same table with some cellpadding added:

Cellpadding

Cellpadding places a cushion of space between the content of a cell and the edge of the cell. Cellpadding is added as an attribute and value to the opening table declaration. Here’s how I did that in the more readable table above:

In the above example, there would be five pixels of space between the cell wall and the cell content on the top, bottom, and left and right edges of the table data cell. Padding can also be added using CSS, and with CSS the padding can be different for each side. You can learn how to do that in this CSS padding tutorial, but for now we’re just covering the basics of HTML tables.

I could achieve a similar result using cellspacing in HTML4.01 or earlier, but cellspacing is not supported in HTML5. The difference between cellpadding and cellspacing is that cellpadding adds a cushion of space between the cell content and the cell wall; while cellspacing adds a cushion of space in between the cells.

Visually, cellpadding and cellspacing look the same unless there are borders or backgrounds involved. Five pixels of cellpadding is the same as 10 pixels of cellspacing on the interior of a table. That’s because each cell has five pixels of padding on each side, so 5 + 5 equals the same 10 pixels of space the cellspacing added between the cells.

In CSS we can do the equivalent of cellspacing:

For a visual reference, see the diagram below depicting the difference between cellpadding and cellspacing.

In the diagram, cell 1 represents a normal cell with no padding. In cell 2 the gray color shows the cellpadding. The green area in between the two cells is the cellspacing. If there were another row the cellspacing would also be between the rows.

You may wonder what’s the difference between using cellpadding and cellspacing. Sometimes there isn’t much difference, sometimes there are small differences you’ll discover as you work with tables. You can use both in the same table as well (with the exception of using cellspacing in HTML5 as previously mentioned).

Cellpadding in CSS

You can add cellpadding using CSS, too, and eliminate using HTML attributes for padding and spacing. Using CSS is slightly more code, but it also has the advantage of being able to set a different amount of padding for each cell, and even a different amount of padding for each side of each cell.

Here’s how:

With that in your external style sheet, all table cells in all tables would have five pixels of padding on each side. See the CSS padding tutorial to learn about setting the padding differently for each side.

If you don’t want all tables to have the same padding, you can create a class that will allow you to specify which tables have whatever amount of padding you choose. See the CSS classes tutorial for more on that.