HTML Table Padding & Spacing
What is Table Padding and Spacing?
Table padding and spacing control the space inside and between table cells. Padding is the space inside cells (between the cell border and content). Spacing (cell spacing) is the space between cells. In HTML5, use CSS instead of deprecated HTML attributes.
Cell Padding
Cell padding is the space inside cells between the content and the cell border. Use CSS padding property:
Padding on All Sides
Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 15px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Different Padding Values
You can set different padding for top, right, bottom, and left:
Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 10px 20px 15px 5px; /* top right bottom left */
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Cell Spacing
Cell spacing is the space between cells. In HTML5, use border-spacing in CSS (only works with border-collapse: separate):
Example
<style>
table {
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Border Spacing Values
You can set different spacing for horizontal and vertical spacing:
Example
<style>
table {
border-collapse: separate;
border-spacing: 5px 15px; /* horizontal vertical */
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Padding vs Spacing
It's important to understand the difference:
- Padding: Space inside cells (between border and content)
- Spacing: Space between cells (requires
border-collapse: separate)
Example - Comparison
<style>
.table1 {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
.table1 td, .table1 th {
border: 1px solid black;
padding: 20px; /* Only padding (no spacing) */
}
.table2 {
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
.table2 td, .table2 th {
border: 1px solid black;
padding: 8px;
}
</style>
<table class="table1">
<tr>
<td>Collapsed borders with padding</td>
</tr>
</table>
<table class="table2">
<tr>
<td>Separate borders with spacing</td>
</tr>
</table>Deprecated HTML Attributes
The HTML cellpadding and cellspacing attributes are deprecated. Use CSS instead:
Example - Don't Use (Deprecated)
<table cellpadding="10" cellspacing="5"></table>Example - Modern Way (CSS)
<style>
table {
border-collapse: separate;
border-spacing: 5px;
}
td, th {
padding: 10px;
}
</style>
<table></table>Best Practices
- Use CSS, not HTML attributes: Cellpadding and cellspacing are deprecated
- Use border-collapse: collapse: This is the most common approach and allows padding only
- Consistent padding: Use consistent padding values throughout your table
- Adequate spacing: Ensure enough padding for readability
- Responsive design: Consider adjusting padding on smaller screens