Cellspacing css border collapse

How to Set Cellpadding and Cellspacing in CSS

Cellpadding and Cellspacing are an effective way to present your html table in a beautiful format. With default table look, the representation of table might look congested and illegible. So cell padding and cell spacing allows you to make your table more presentable. In this tutorial, we will be looking into several ways to set Cellpadding and cellspacing in a table using HTML and css. We will also be looking into Javascript and see how we can dynamically change the cell padding and spacing.

Cell padding and Cell spacing, these two terms, can often be confusing and misleading. Lets break it down and understand what each terms mean. Consider you have two cells in a table. The space between those two adjacent cell is cell spacing.

Now within those cell you will have some contents. The space between the cell-border or cell wall and the contents of your cell is cell padding. Or simply, the space around the text in a cell is cell padding.

If you are still unclear, then the figure below should make it clear.

Those two boxes represent two cells of a table. The cell spacing doesn’t just define the space between horizontal cell but also between vertical cells.

Set Cellpadding and Cellspacing in Table Using HTML and CSS

Well, I hope you understood the difference between Cellpadding and cellspacing. Now lets look into several ways to code HTML and CSS so as to set the cellspacing and cellpadding separately.

1. Cell spacing with cellspacing without CSS — Deprecated in HTML5

In this approach we are using cellspacing attribute of table to set the space between two cells. But cellspacing isn’t supported by HTML5. Still, lets see how cellspacing could be used to add space among the cell.

First of all lets understand a basic structure of table tag in HTML

 
 
table head1
 
table head2
 
 
table data1
 
table data2
 
 
 

In the above html, I’ve created a table enclosed by a table tag. Within that table I have created two table rows tr . The first row contains the header element of the table th and the second row contains data of the table td corresponding arranged with respect to the header.

Okay that was some basics of table structure in HTML

Now lets get into the serious stuff. In this section we are planning to add cell spacing using cellspacing in html code.

So firstly lets create a simple table strcture.

 
OnAirCode
 
Cell Spacing and Cell Padding Tutorial
 
cellspacing---Deprecated on HTML5
 
 
Year
 
Month
 
Day
 
 
2017
 
July
 
15
 
 
2018
 
January
 
27
 
 
2019
 
August
 
7
 
 
2020
 
May
 
8
 
 
  

In above HTML, I’ve used center tag to align all the contents to center. It only contains some basic table structure which produces a default structure of table. Lets see what we’ve got..

You can clearly see that the table isn’t readable. All the contents of the table are crowded as we’ve not yet set the cell spacing and cell padding.

So now lets add cellspacing on our html and see how that can change the our table.

Add the cellspacing attribute with some values in the table tag just like the above code. Though you can see that spaces have been set.

You can’t yet understand how the cells are arranged. So add the following code to CSS to observe how cellspacing has changed your table.

Now, lets see what we’ve got.

Here you can observe that each cell is spaced between another cell by 25px but the content within the cell doesn’t have any space around it. That’s because, we haven’t set any cell padding to the table.

2. Cell Padding with cellpadding — Deprecated in HTML5

Okay, On previous section we saw how cellspacing can change the cells formatting on the table.

Now lets look how cellpadding changes the cell format of our HTML table. This attribute cellpadding has also been phased out from HTML5 and so it is also not supported on HTML5.

Now lets see the effect of cellpadding. On the same HTML code above. change the cellspacing to cellpadding like this in the table tag:

Okay, Now lets see how that changes our table:

Now you can see that each cell has been expanded to surround the content with 20px padding. But the space between cell is default which is 2px in my browser but may differ on your browser.

Nonetheless we can see that the space between the cell is almost to nothing.

Okay, Now lets use both attributes and see their effect.

Just change the table tag of the HTML with the above code.

3. Cellspacing with border-spacing CSS

Since cellpadding and cellspacing attribute on HTML has been deprecated on HTML5. We need another alternative for padding and spacing of cells.

So, In this section we will be using border-spacing to CSS property which allows of cellspacing on table.

Okay, Lets add the following HTML. It is exactly same to the HTML code of above sections just without any attributes in table tag.

 
OnAirCode
 
Cell Spacing and Cell Padding Tutorial
 
Border-spacing
 
 
Year
 
Month
 
Day
 
 
2017
 
July
 
15
 
 
2018
 
January
 
27
 
 
2019
 
August
 
7
 
 
2020
 
May
 
8
 
 
  

Now lets add border-spacing property on our CSS.

In the above CSS, I’ve set border-spacing to 25px which sets the cellspacing to 25px. So, with this property the result design should be same to that of section 1.

Border-spacing

Okay, Since the special feature of this section is border-spacing . Lets look into this property with more details. First of all, border-spacing property is only applicable to tables or inline-tables unlike CSS padding ,which ,though, we will use it as a cell padding in following section, can be applied to any elements.

Also border-spacing requires that border-collapse property be set to separate which is its default value. This means that if you change border-collapse property setting it to other than separate then border-spacing property won’t work.

In our CSS, we haven’t used border-collapse property coz it’s default property is already separate .

Now lets look into values of the border-spacing property. It can have three different types of values.

Length Length: allows us to set values in px, cm etc with first length denoting the space between horizontally adjacent cells and second length denoting the space between vertically adjacent cells.

However In tutorial we have only used one length as: border-spacing: 25px; this sets the distance to 25px between all adjacent cells be it vertical or horizontal.

Note: initial is used to set to default value and inherit is used to inherit value from its parent

4. Using CSS padding for Cell padding

Now lets look into cell padding. As I’ve already mentioned above cellpadding attribute of table tag is not supported by HTML5, we have to look for other alternatives to function the same.

Luckily, we have padding property in CSS which works just fine.

I am not going to add some extra HTML for this section. Since the structure is same to that of section 3. Though just for the difference I will be changing some texts beyond the table element which doesn’t effect our table representation.

So yeah, Lets just add CSS for this section.

In the above CSS I’ve added border to table and padding to table head and data. Let’s see how that changes our table:

Okay, It’s should obvious as of now, if you followed along, that each cell has been padded to 20px in all sides. There is no any stringent rule on the value of border-collapse in padding.

So lets see how border-collapse differentiates the table designs for each value.

Border-collapse

In CSS, border-collapse helps to set the border of tables separately or collapsed as a single border. All along this tutorial, we haven’t touched border-collapse property. So due to the default value separate , you can see separate borders for each row.

In this above CSS padding example, lets modify border-collapse value to see how it effects our table cells.

Here, we’ve set the value of border-collapse to collapse . Now lets see how this changes the table compared to previous display.

5. Both Cell padding and Cell spacing with CSS padding and border-spacing

Now lets finally see both cell padding and cellspacing by combining both css padding and border-spacing.

HTML for table structure

 
OnAirCode.com
 
Cell Spacing and Cell Padding Tutorial
 
Border-spacing and CSS padding
 
 
Year
 
Month
 
Day
 
 
2017
 
July
 
15
 
 
2018
 
January
 
27
 
 
2019
 
August
 
7
 
 
2020
 
May
 
8
 
 
  

CSS for cellspacing and cellpadding

Okay Now finally lets see how that turns up combining both cell padding and cell spacing.

6. Using JavaScript for CellSpacing and Padding by Manipulating CSS and Table Attribute

Sometimes you might want to add cell spacing and padding dynamically. And for that we can use JavaScript as it allows to change the style elements dynamically.

So, lets how to change the cell padding and cell spacing of our table from html with JavaScript.

Since we can perform DOM manipulation with JS, we can used that to change cellspacing and cellpadding by changing CSS or HTML attribute.

Now lets look at changing the property and attributes for cell padding and cell spacing with JavaScript separately.

cellpadding

In this section we will be changing the cellpadding attribute of the CSS table by simple DOM manipulation. For this, I have set the id of the table to table and set the cellPadding attribute as below.

document.getElementById('table').cellPadding="20px";

cellspacing without CSS

Similar to above, Here also I’ve set the id of the table to table and on JavaScript I have added DOM manipulation code as below to set the cellspacing attribute.

document.getElementById('table').cellSpacing="20px";

border-spacing

As we know that above two are the attributes of table element. However border-spacing is the CSS property. So, below I’ve added style on the code to modify the style of the border-spacing by setting its value to 20px .

document.getElementById('table').style.borderSpacing="20px";

Conclusion

In this tutorial, we have looked into some ways to set cell padding and cell spacing with HTML, CSS and JavaSCript. We looked into cellpadding, cellspacing attribute of html table and as well as border-spacing and CSS padding. Since the previous two are phased out in html5, it is recommended to use the later two.

Also we looked into ways to manipulate the cellpadding and cellspacing through javascript. If you are using jquery, then you may proceed similarly to change the CSS of particular DOM element.

Congrats you held through! That’s it for now.

Источник

How to Set Cellpadding and Cellspacing in CSS

How to adjust spacing separately for the top, right, left, and bottom of each cell?

You can use the CSS padding property to adjust the spacing of each cell in an HTML table separately. The padding property takes up to four values, which correspond to the top, right, bottom, and left sides of the element, respectively.

Here’s an example of how to adjust the spacing of each cell separately in an HTML table:

html> html> head> title>Title of the document title> head> body> table> tr> td style="padding: 10px 20px 30px 40px; background-color: cyan;">Cell 1 td> td style="padding: 20px 30px; background-color: cyan;">Cell 2 td> tr> tr> td style="padding: 0 0 10px; background-color: cyan;">Cell 3 td> td style="padding: 0 20px; background-color: cyan;">Cell 4 td> tr> table> body> html>

In this example, the first cell in the first row has a padding of 10 pixels for the top, 20 pixels for the right, 30 pixels for the bottom, and 40 pixels for the left. The second cell in the first row has a padding of 20 pixels for the top and bottom, and 30 pixels for the right and left. The first cell in the second row has a padding of 0 pixels for the top and right, and 10 pixels for the bottom. The second cell in the second row has a padding of 0 pixels for the top and bottom, and 20 pixels for the right and left.

You can adjust the values of the padding property to achieve the desired spacing for each cell in the table. Additionally, you can use CSS classes to apply the same padding values to multiple cells in the table.

Источник