Cellpadding and Cellspacing
The <table> element has three attributes that provide some basic control over the spacing around table cells: border, cellpadding, and cellspacing. These three table attributes are similar to the CSS properties border, padding, and margin. Let’s see how they work.
First we’ll create a table with no borders, cellpadding, or cellspacing. In order to make things easier to see, we’ll use CSS to color the background of the table (green) and the individual table cells (yellow).
Example 4.6. Table: No Spacing
<html>
<head>
<style>
table { background: #009900; }
td { background: #ffff00; }
</style>
</head>
<body>
<table
border="0" cellpadding="0" cellspacing="0"
summary="No padding, spacing, or borders">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>
</body>
</html>
With no border, cellspacing, or cellpadding, our three cells are so cramped that we can’t see the green background of the table — just the yellow background of the individual cells. Let’s try setting each of these attributes to "5" five pixels) separately. We’ll maintain the same green and yellow coloring scheme.
Example 4.7. Table: 5px Spacing
<html>
<head>
<style>
table { background: #009900; }
td { background: #ffff00; }
</style>
</head>
<body>
<h4>5px Border</h4>
<table
border="5" cellpadding="0" cellspacing="0"
summary="Table with a 5px border">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>
<h4>5px Cellpadding</h4>
<table
border="0" cellpadding="5" cellspacing="0"
summary="Table with 5px cellpadding">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>
<h4>5px Cellspacing</h4>
<table
border="0" cellpadding="0" cellspacing="5"
summary="Table with 5px cellspacing">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>
</body>
</html>
What are the results?
-
In the first table,
border="5". We see a five-pixel border around the edge of the table. -
In the second table,
cellpadding="5". The size of each cell has expanded by five pixels in every direction. -
In the third table,
cellspacing="5". Each cell is separated from its neighbors by five pixels. This spacing enables us to see the green background of the table itself.
Finally, let’s set all three attributes. We’ll set the border to 5px, the cellspacing to 10px, and the cellpadding to 20px.
Example 4.8. Table: Variable Spacing
<html>
<head>
<style>
table { background: #009900;}
td { background: #ffff00; }
</style>
</head>
<body>
<table
border="5" cellpadding="20" cellspacing="10"
summary="Table with a 5px border,
20px cellpadding, and 10px cellspacing">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>
</body>
</html>
The ridged border around the table is five pixels wide, the cells are ten pixels apart, and the cells themselves have twenty pixels of padding. Some browsers will display the border colored with the background color, green; others will leave the ridged border colorless.