Quackit Logo

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

CSS Cellpadding

Print Version

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:

Padded Cell 1Padded Cell 2
Padded Cell 3Padded Cell 4

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:

Padded Cell 1Padded Cell 2
Padded Cell 3Padded Cell 4

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.

Enjoy this website?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
               
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!