PUBLISHED ON: AUGUST 9, 2021
How to set cellpadding and cellspacing in CSS?
The cellpadding and cellspacing are tables attribute that set space within the table. The cellpadding creates space between the border of the cell and the inner elements within the cell whereas the cellpadding creates space between two table cells.
The cellpadding and cellspacing are not supported in HTML 5. But still, we can create spacing by using CSS padding and border-spacing properties.
The alternative used for cellpadding is:
td,
th {
padding: 15px;
}
The alternative used for cellspacing is:
table {
border-spacing: 15px;
}
Creating a Table using padding and border-spacing
Create a <table> element with <th>, <tr> and <td> tags and add content to it. Add the padding property to the <th> and <td> elements for defining cellpadding. The cellspacing is set by defining border-spacing property. Add styles to the border like background- color, color, and text-alignment.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
table {
border-collapse: separate;
border-spacing: 15px;
background-color: grey;
}
table,
th,
td {
border: 2px solid blue;
text-align: center;
}
th {
color: blue ;
background-color: white;
padding: 10px;
}
td {
background-color: white;
padding: 15px;
}
</style>
</head>
<body>
<h2> Cellpadding and Cellspacing In Table</h2>
<table>
<thead>
<tr>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>Camera</td>
<td>Printer</td>
</tr>
<tr>
<td>Speaker</td>
<td>Mic</td>
<td>Light</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
Though cellpadding and cellspacing attributes are not supported in HTML5, we can still add the cellpadding and cellspacing using padding and border-spacing respectively.
