Cell Spacing and Cell Padding

Updated on 31/01/2025482 Views

Table of Content

I am sure we have all faced this problem: We have had very limited space in a specific part of our web page where we wanted to incorporate a table, but the default sizing of the table just would not fit, making the whole layout of the web page look unattractive. That is where the concept of cell spacing and cell padding in HTML comes in.

Being a software developer myself, I use the concept of cell spacing and cell padding almost regularly when designing my web pages. In this tutorial, let me teach you how you too can use cell spacing and cell padding in your future projects to organize tables better.

Let me define table cell padding first. It is the space between the content and the cell border. The cell spacing, on the other hand, signifies the space between two adjacent cells.

What Is Cell Padding in HTML?

Now that I have given you a basic idea of what cell padding and cell spacing are in HTML, let us dive deeper first into cell padding. Let’s discuss how and when to use cell padding in HTML.

As discussed earlier, cell padding refers to the space between adjacent cells in a table. Let me explain with an example to give you a better idea.

Cell Padding example

output for cell padding example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
/* Cell padding using CSS */
table {
border-collapse: collapse; /* Ensures cell padding is applied */
}
td {
padding: 11px; /* This adds 11 pixels of padding to all the cells */
border: 1px solid #000; /* Border for visual clarity */
}
.custom-padding {
padding: 15px; /* Different padding for cells with the class */
}
</style>
</head>
<body>
<h2>Cell padding using just HTML cellpadding attribute</h2>
<table border="1.5" cellpadding="12">
<tr>
<td>Cell A-1</td>
<td>Cell B-2</td>
</tr>
<tr>
<td>Cell C-1</td>
<td>Cell D-2</td>
</tr>
</table>
<!-- Table with default cell padding using CSS-->
<h2>Default Cell Padding</h2>
<table>
<tr>
<td>Cell E-1</td>
<td>Cell F-2</td>
</tr>
<tr>
<td>Cell G-1</td>
<td>Cell H-2</td>
</tr>
</table>

<!-- Table with custom cell padding using CSS-->
<h2>Custom Cell Padding</h2>
<table>
<tr>
<td class="custom-padding">Cell I-1</td>
<td class="custom-padding">Cell J-2</td>
</tr>
<tr>
<td class="custom-padding">Cell K-1</td>
<td class="custom-padding">Cell L-2</td>
</tr>
</table>

</body>
</html>

In the above example, I have used three separate tables to explain three use cases. Let me explain them to you one by one.

In the first table, I used the default cellpadding attribute and set the value to 12. This makes sure that there is a space of 12 pixels between the content and the border of the cell.

In the second table, the cell padding value defaults to 11 pixels because of CSS. This means all the cells inherit this trait automatically.

In the third table, we have created a custom cell spacing of 15 pixels. This is initially targeted using CSS.

What is Cell Spacing in HTML?

Now that you have a pretty good idea of how to use cell padding in HTML, let me explain the concept of cell spacing.

As we have discussed earlier, cell spacing is the space between two adjacent cells of a table in HTML. To explain the different ways you can implement this functionality, let me explain with the help of an example.

Cell spacing example

output for cell spacing example

Code:

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for default cell spacing */
table{
border-collapse: separate;
border-spacing: 50px 10px; /* Different vertical and horizontal spacing */
td {
padding: 15px; /* Additional padding for cells */
}
/* Optional CSS styles for visual clarity */
table, td {
border: 1px solid black; /* Borders for visual clarity */
}
}

/* CSS for custom cell spacing */
.custom-spacing {
border-collapse: separate;
border-spacing: 30px 10px; /* Different vertical and horizontal spacing */
}
.custom-spacing td {
padding: 15px; /* Additional padding for cells */
}
/* Optional CSS styles for visual clarity */
table, td {
border: 1px solid black; /* Borders for visual clarity */
}
</style>
</head>
<body>
<!-- Table using CSS for cell spacing -->
<h2>Table 1: CSS for Cell Spacing</h2>
<table>
<tr>
<td>Cell 1-1</td>
<td>Cell 1-2</td>
</tr>
<tr>
<td>Cell 2-1</td>
<td>Cell 2-2</td>
</tr>
</table>
<!-- Table using HTML attribute for cell spacing -->
<h2>Table 2: HTML Attribute for Cell Spacing</h2>
<table border="1" cellspacing="20">
<tr>
<td>Cell A-1</td>
<td>Cell A-2</td>
</tr>
<tr>
<td>Cell B-1</td>
<td>Cell B-2</td>
</tr>
</table>
<!-- Table with custom cell spacing using CSS and HTML class -->
<h2>Table 3: Custom Cell Spacing with CSS</h2>
<table class="custom-spacing">
<tr>
<td>Cell X-1</td>
<td>Cell X-2</td>
</tr>
<tr>
<td>Cell Y-1</td>
<td>Cell Y-2</td>
</tr>
</table>
</body>
</html>

In the above example, I have again used three tables to demonstrate the different ways we can use cell spacing in HTML.

In the first table, we java used the default CSS styling which we have established in the style elements in the beginning. This provides the cells with a spacing of 50 pixels and 10 pixels horizontally and vertically.

In the second table, we have used the cellspacing attribute and assigned a value to cell spacing directly. This provides a cell spacing of 20 pixels.

In the last table, we have defined a custom cell spacing in the CSS section in the beginning.

Cell Spacing vs Cell Padding

The difference between cell spacing and cell padding can be confusing. They sound quite similar. In this section of the tutorial, let me state the differences and explain how these two attributes are different. This will give you a better idea of how and when to use them.

Point of difference	Cell Spacing	Cell Padding
Purpose	Cell spacing in HTML refers to the space between the cells of a table.	Cell padding in HTML refers to the space between the content inside the cell and the respective cell border.
Affected area	Cell spacing adds space around each cell, resulting in a visible gap between neighboring cells in the table. It has an effect on the amount of space between cell borders.	Cell padding is used to define the space between the content inside a cell and its border. It has an effect on the space within cell boundaries.
Control	HTML table cell spacing can be set using the HTML cellspacing attribute (deprecated) or the CSS border-spacing property.	Cell padding can be modified using HTML's cellpadding attribute (deprecated) or CSS's padding property.
Default	The default value of cell spacing is 2 in HTML.	The default value of cell padding is 1 in HTML.

Cell Spacing and Cell Padding Example using CSS

Now in this section of the tutorial, let us use everything we have learned so far to create an aesthetic table in HTML incorporating cell spacing and cell padding attributes in HTML using CSS. Here’s a good example:

Cell spacing and cell padding example

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Cell Spacing and Cell Padding Example</title>
<style>
table {
width: 100%;
border-collapse: separate;
border-spacing: 10px; /* Cell spacing */
}
th, td {
padding: 25px; /* Cell padding */
border: 5px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Heading a</th>
<th>Heading b</th>
<th>Heading c</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row A, Cell 1</td>
<td>Row A, Cell 2</td>
<td>Row A, Cell 3</td>
</tr>
<tr>
<td>Row B, Cell 1</td>
<td>Row B, Cell 2</td>
<td>Row B, Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>

In the above example,

To control cell spacing in the table, use the CSS properties border-collapse: separate and border-spacing: 10px.

The CSS padding: 25px property is used to apply cell padding to all cells in the table.

Summing Up

To sum up, understanding and effectively applying cell spacing and cell padding are critical skills for creating well-structured and visually appealing HTML tables. These attributes are very important for controlling cell spacing and padding. They ultimately affect how interactive and aesthetic tables look in your future HTML projects.

This tutorial has given you a basic idea of cell spacing and cell padding in HTML. I suggest you check out certified courses to learn more advanced topics. I highly recommend courses from upGrad. Their courses are in collaboration with some of the best universities around the world. Their courses are curated by some of the best professors in this field.

Frequently Asked Questions

What is cell spacing?

Cell spacing is the distance between cells in an HTML table. It can be changed with CSS or deprecated HTML attributes. The cell spacing attribute lets you adjust the distance or gap between adjacent cells in a table.

What is cell padding?

Cell padding is the gap between the contents of a table cell and its border. It is a property that can be changed with CSS or deprecated HTML attributes. Table cell padding allows us to adjust the space between the text or content inside a table cell and its edges.

How are cell spacing and cell padding different?

Cell spacing affects the gap between cells, whereas cell padding changes the gap between a cell's content and its border. Both attributes can be adjusted to produce specific layout and styling effects in HTML tables.

How are cell spacing and cell padding defined in HTML?

Cell spacing and cell padding can be defined in HTML using appropriate tag attributes. However, it is crucial to note that the use of these attributes (cellspacing and cellpadding) is considered outdated in current web development, and CSS should be used instead for styling.

Can cell spacing and cell padding be customized separately for rows and columns?

Conventional HTML elements such as cellpadding and cellspacing in HTML cannot be used to define cell spacing or padding separately for rows or columns. Although we can use CSS to target individual cells in HTML.

Why are cell spacing and cell padding important in web design?

Cell spacing and cell padding are important in web design because they improve the aesthetics of the web page. They also make the user experience better and more interactive.