Education Ecosystem Blog

English

Learn HTML-CSS – How To Set Cellpadding and Cellspacing?

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:

<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.

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.

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:

Ozzyoz

LucasDeveloper

Another cool way to find out interesting things about HTML/CSS is to access our project page!

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.

Next 我们为什么要将Livecoding的品牌转型为LiveEdu? »

Previous « Como saber se há uma substring dentro de uma string em JavaScript

View Comments

Simon Turner says:

December 28, 2016 at 11:50 am

A good tutorial for beginners if they want to learn the basic concept of cellpadding and cellspacing. I like how the content is re-presented here.