Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between Cellpadding and Cellspacing
In HTML, cellpadding and cellspacing are two attributes used for formatting table cells. Both attributes control whitespace in tables, but they serve different purposes. The cellpadding attribute sets the whitespace between the cell edge and cell content, whereas cellspacing controls the whitespace between adjacent cells.
Note − While these attributes were commonly used in older HTML versions, they are deprecated in HTML5. Modern web development uses CSS properties like padding and border-spacing for better control and separation of content from presentation.
What is Cellpadding?
The cellpadding attribute controls the whitespace between the cell border and the cell content. It creates internal spacing within each cell, making the content appear less cramped against the cell boundaries.
The cellpadding value can be specified in pixels or as a percentage. Setting cellpadding to 0 removes all internal spacing, while higher values create more breathing room around the content.
Syntax
Following is the syntax for the cellpadding attribute −
<table cellpadding="value">
<tr>
<td>Cell content</td>
</tr>
</table>
Example − Cellpadding Demonstration
Following example shows the difference between tables with and without cellpadding −
<!DOCTYPE html>
<html>
<head>
<title>Cellpadding Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Without Cellpadding (cellpadding="0")</h3>
<table border="1" cellpadding="0">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<h3>With Cellpadding (cellpadding="10")</h3>
<table border="1" cellpadding="10">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
The first table shows content pressed against cell borders, while the second table provides comfortable spacing around the content −
Without Cellpadding: |Cell 1|Cell 2| |Cell 3|Cell 4| With Cellpadding: | Cell 1 | Cell 2 | | Cell 3 | Cell 4 |
What is Cellspacing?
The cellspacing attribute controls the distance between adjacent cells in a table. It creates visible gaps between cell borders, affecting the overall table appearance and readability.
Unlike cellpadding which affects content within cells, cellspacing changes the spacing between the cells themselves. The default cellspacing value is typically 2 pixels in most browsers.
Syntax
Following is the syntax for the cellspacing attribute −
<table cellspacing="value">
<tr>
<td>Cell content</td>
</tr>
</table>
Example − Cellspacing Demonstration
Following example demonstrates the effect of different cellspacing values −
<!DOCTYPE html>
<html>
<head>
<title>Cellspacing Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Without Cellspacing (cellspacing="0")</h3>
<table border="1" cellspacing="0">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<h3>With Cellspacing (cellspacing="8")</h3>
<table border="1" cellspacing="8">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
The first table shows cells touching each other, while the second table has visible gaps between cells −
Without Cellspacing: +------+------+ |Cell 1|Cell 2| +------+------+ |Cell 3|Cell 4| +------+------+ With Cellspacing: +------+ +------+ |Cell 1| |Cell 2| +------+ +------+ +------+ +------+ |Cell 3| |Cell 4| +------+ +------+
Combining Cellpadding and Cellspacing
Example − Using Both Attributes
Following example shows how cellpadding and cellspacing work together −
<!DOCTYPE html>
<html>
<head>
<title>Cellpadding and Cellspacing Combined</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Table with Both Attributes</h3>
<table border="1" cellpadding="15" cellspacing="5" style="background-color: #f0f0f0;">
<tr>
<td style="background-color: white;">Product</td>
<td style="background-color: white;">Price</td>
<td style="background-color: white;">Stock</td>
</tr>
<tr>
<td style="background-color: white;">Laptop</td>
<td style="background-color: white;">$999</td>
<td style="background-color: white;">15</td>
</tr>
<tr>
<td style="background-color: white;">Mouse</td>
<td style="background-color: white;">$25</td>
<td style="background-color: white;">50</td>
</tr>
</table>
</body>
</html>
This creates a table with generous internal padding (15px) and noticeable gaps between cells (5px).
Modern CSS Alternatives
Since HTML5 deprecated these attributes, modern web development uses CSS properties for table styling −
For cellpadding equivalent − Use CSS
paddingproperty on<td>elements.For cellspacing equivalent − Use CSS
border-spacingproperty on<table>elements.
Example − CSS Alternative
<!DOCTYPE html>
<html>
<head>
<title>Modern CSS Table Styling</title>
<style>
.modern-table {
border-collapse: separate;
border-spacing: 5px;
border: 1px solid #333;
}
.modern-table td {
padding: 15px;
border: 1px solid #333;
background-color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f0f0f0;">
<h3>CSS-Styled Table</h3>
<table class="modern-table">
<tr>
<td>Product</td>
<td>Price</td>
<td>Stock</td>
</tr>
<tr>
<td>Laptop</td>
<td>$999< 
7K+ Views
