Are you looking for how to set cellpadding and cellspacing in HTML? If yes, then you have come to the right place. The use of cellpadding and cellspacing is very common in HTML. However, before we get started with the problem at hand, let’s take a moment to define these terms.
Cellpadding and cellspacing are table attributes that give table cells space to breathe. Cellspacing handles the space between the two table cells. Cellpadding, on the other hand, handles the space between the border of the table cell and its inner element(s).
So, how can you set cellpadding and cellspacing in HTML/CSS? Let’s first look at the HTML example.
To set cellpadding and cellspacing in HTML, all you need to do is use the following code:
|
1 |
<table cellspacing=”1” cellpadding=”1”> |
In this case, cellspacing and cellpadding act as an attribute. The same can be done to the <tr> and <td> HTML tags.
To do the same thing in CSS, you need to use the padding attribute to your advantage to handle cellpadding.
|
1 2 3 4 5 |
td { padding: 10px; } |
Cellspacing can be a tough proposition to work with. To make it work, you need to use the border-spacing CSS property.
|
1 2 3 4 5 6 7 |
table { border-spacing: 20px; border-collapse: separate; } |
The border-collapse ensures that you don’t have to create border-spacing for both vertical and horizontal.
And, that’s it! You have successfully added cellpadding and cellspacing to your table. Do you have anything to add to the tutorial, then comment below and let us know.
You can also check on our website videos about HTML/CSS. Below are some examples:
- Creating my github page (part 1) – HTML5
- Developing a Website (part 8) – HTML5
You can also follow some of our broadcasters who program in JavaScript as below:
Another cool way to find out interesting things about HTML/CSS is to access our project page!
