Quackit Logo
CSS Home

CSS Tutorial

Introduction
CSS Advantages
CSS Syntax
Implementing CSS
CSS Class
CSS ID
CSS Font
CSS Text
CSS Background Code
CSS Border
CSS Margin
CSS Padding
CSS Lists
CSS Height & Width
CSS Positioning
CSS Float
CSS Layers
CSS Summary

CSS Codes

CSS Align
CSS bgcolor
CSS Cellpadding
CSS Cellspacing
CSS Floating Menu
CSS Hyperlinks
CSS Leading
Inline Style Sheets
Embedded Style Sheets
External Style Sheets
CSS Scrollbars
CSS Table Width
CSS Print Version
CSS Table-layout

CSS Examples

CSS Examples
CSS Table-layout Example

CSS Reference

CSS Mini Tutorial
CSS Properties
CSS Color Codes
CSS Template
CSS Media Types
FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
Create free Flash websites

CSS Cellpadding

Print Version
Related:
• CSS padding Property
• CSS Tutorial: padding
• CSS margin

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.

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:

<html>
<head>
<style type="text/css">
table.padded-table td { 
	padding:10px; 
	}
</style>
</head>
<body>
<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>
</body>
</html>

Result:

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

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.

Code:

<html>
<head>
<style type="text/css">
table.padded-table-2 td { 
	padding-top:20px; 
	padding-right:10px; 
	padding-bottom:0px; 
	padding-left:100px; 
	}
</style>
</head>
<body>
<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>
</body>
</html>

Result:

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

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.

Code:

<style type="text/css">
table.padded-table-3 td { 
	padding:20px 10px 0px 100px; 
	}
</style>
<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>

Result:

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

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 10px 0px 100px;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>

Result:

With padding:

Padded div

Without padding:

Non-padded 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.

Enjoy this website?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!
Need Website Content?
Get unique, quality digital content for your website.
  • 270+ Website Templates
  • 800+ Flash Templates
  • 25,000+ Images, Logos
  • 30,000+ e-Books
  • 15,000+ Scripts
  • 27,000+ Animated GIFs
  • 21,000+ Ringtones
  • ...and much more!
Get your content now!
$1.99 .info domain names!
© Copyright 2000 - 2010 Quackit.com