How to set table cellpadding and cellspacing in CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS padding & border-spacing property
As we know the table's cellpadding and cellspacing attributes are removed in HTML5.
But, you can still set padding inside the table cells easily using the CSS padding property. This is a valid way to produce the same effect as table's cellpadding attribute.
The style rules in the following example will add 10 pixels of padding to the table cells.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
<style>
table, th, td{
border: 1px solid #666;
}
table th, table td{
padding: 10px; /* Apply cell padding */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>Similarly, you can use the CSS border-spacing property to apply the spacing between the adjacent table cell borders, like cellspacing attribute. However, in order to work border-spacing the value of the border-collapse property must be separate, which is default.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
<style>
table{
border-collapse: separate;
border-spacing: 10px; /* Apply cell spacing */
}
table, th, td{
border: 1px solid #666;
}
table th, table td{
padding: 5px; /* Apply cell padding */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
