CSS Cellpadding

You may be familiar with the HTML 'cellpadding' attribute of the 'table' tag. This attribute creates space inside of a table cell so that you get a nice bit of white space, or "padding", between your element and the sides of the table.

Well, there isn't actually a CSS 'cellpadding' property or attribute, but there is the CSS padding property which allows you to achieve the same effect - and more. You can use this property to set the padding on your table cells. You can even set different padding for each side of the cell. Furthermore, you can use this property on any element - you're not limited to table cells.

HTML 'cellpadding' Example

Here's a typical example of cellpadding usage in HTML.

Code:

<table border="1" cellpadding="10px">
<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>
<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>
</table>

Result:

CSS 'padding' Example

To achieve the same effect using CSS, use the following code.

Code:

<style type="text/css">
table.padded-table td { padding:10px; }
</style>
<table border="1" class="padded-table">
<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>
<tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr>
</table>

Result:

You can also use CSS border-collapse to collapse the border. Although this can have a similar effect to cellpadding in some cases, it isn't padding and shouldn't really be used as such.

Also see CSS padding, CSS Cellspacing, and CSS border-spacing.