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 most elements - you're not limited to table cells.

HTML 'cellpadding' Example

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

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

CSS 'padding' Example

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

<style type="text/css">
table.padded-table td { padding:10px; }
</style>
<!-- Place the above styles in the document's head  (i.e. between the <head></head> tags) -->
<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>

Padding for Each Side

One of the great things about the CSS 'padding' property is that you can apply different padding to each side of the cell.

There are two methods of specifying padding for different sides of an element.

Method 1

This method sets padding using the padding-top, padding-right, padding-bottom, and padding-left properties.

<style type="text/css">
table.padded-table-2 td { padding-top:20px; padding-right:2px; padding-bottom:10px; padding-left:12px; }
</style>
<!-- Place the above styles in the document's head  (i.e. between the <head></head> tags) -->
<table border="1" class="padded-table-2">
<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>

Method 2

This method uses a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left. This method is quicker. It also uses less code than the previous method. Actually, it's the same property that we used in our first example.

Here, we apply multiple values against the padding property.

<style type="text/css">
table.padded-table-3 td { padding:20px 2px 10px 12px; }
</style>
<!-- Place the above styles in the document's head  (i.e. between the <head></head> tags) -->
<table border="1" class="padded-table-3">
<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>

Variations

You don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

In other words:

padding:10px;

All four sides have padding of 10 pixels.

padding:10px 20px;

Top and bottom have padding of 10 pixels.
Right and left have padding of 20 pixels.

padding:10px 20px 30px;

Top is 10px
Left and right are 20px
Bottom is 30px

padding:10px 20px 30px 40px;

Top is 10px
Right is 20px
Bottom is 30px
Left is 40px

Padding on Other Elements

As mentioned, you can apply padding to most HTML elements - not just table cells.

In this case, instead of applying padding against a table cell, we apply it to a div element.

Also, this example uses inline style sheets to apply the padding (the previous example uses embedded style sheets).

Code:

<p>With padding:</p>
<div style="padding:20px 2px 30px 10px;border:1px solid black;width:100px;">
Padded <a href="/html/tags/html_div_tag.cfm">div</a>
</div>
<p>Without padding:</p>
<div style="border:1px solid black;width:100px;">
Non-padded <a href="/html/tags/html_div_tag.cfm">div</a>
</div>

As you can see, applying padding to an element can affect the size of that element. In the example above, both div elements are specified to be 100 pixels wide. However, the padding on the first div pushes the size out, resulting in a larger div.

Further Information

You can't apply CSS padding to table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column elements.

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.

Web.QHMIT.com