Html table border collapse spacing

How to Add Space Between Rows in the Table

Today’s task is to create space between two rows in a table. The space between two rows in a can be added by using the CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table , and the border-collapse property specifies whether the border of the table is collapsed or not. The border-spacing property can be used only when the border-collapse property is set to «separate».

Let’s see an example and show how to do that step by step.

Create HTML

body> div> h2>W3docsh2> h3>Row spacing in a tableh3> table> tr> th>Employee IDth> th>Nameth> th>Genderth> th>Ageth> tr> tr> td >td">10001td> td>Tomtd> td>Mtd> td>30td> tr> tr> td >td">10002td> td>Sallytd> td>Ftd> td>28td> tr> tr> td >td">10003td> td>Emmatd> td>Ftd> td>24td> tr> table> div> body>

Add CSS

• Use the border-collapse property with its «separate» value for the table.
• Use the border-spacing property to set the distance between the borders of neighbouring table cells.
• For the first row, set the background color and the color of the text by using the background-color and color properties.
• Set the width and padding of the rows.
• Use the text-align property with the «center» value which aligns the text to the center.
• You can create a border around the cells of the table by using the border property and use the border-width, border-style and border-color properties.
• You can set the color of the element of the document by using the color property. Also, you can choose any color from our color picker.

table < border-collapse: separate; border-spacing: 0 15px; > th < background-color: #4287f5; color: white; > th, td < width: 150px; text-align: center; border: 1px solid black; padding: 5px; > h2 < color: #4287f5; >

Here is the result of our code.

Example of adding space between horizontal rows:

html> html> head> title>Title of the document title> style> table < border-collapse: separate; border-spacing: 0 15px; > th < background-color: #4287f5; color: white; > th, td < width: 150px; text-align: center; border: 1px solid black; padding: 5px; > h2 < color: #4287f5; > style> head> body> div> h2>W3docs h2> h3>Row spacing in a table h3> table> tr> th>Employee ID th> th>Name th> th>Gender th> th>Age th> tr> tr> td class="td">10001 td> td>Tom td> td>M td> td>30 td> tr> tr> td class="td">10002 td> td>Sally td> td>F td> td>28 td> tr> tr> td class="td">10003 td> td>Emma td> td>F td> td>24 td> tr> table> div> body> html>

Result

Row spacing in a table

Employee ID	Name	Gender	Age
10001	Tom	M	30
10002	Sally	F	28
10003	Emma	F	24

Example of adding space between vertical columns:

html> html> head> title>Title of the document title> style> table < border-collapse: separate; border-spacing: 20px 0; > th < background-color: #4287f5; color: white; > th, td < width: 150px; text-align: center; border: 1px solid black; padding: 5px; > h2 < color: #4287f5; > style> head> body> div> h2>W3docs h2> h3>Row spacing in a table h3> table> tr> th>Employee ID th> th>Name th> th>Gender th> th>Age th> tr> tr> td class="td">10001 td> td>Tom td> td>M td> td>30 td> tr> tr> td class="td">10002 td> td>Sally td> td>F td> td>28 td> tr> tr> td class="td">10003 td> td>Emma td> td>F td> td>24 td> tr> table> div> body> html>

In our first example, for the border-spacing property, we use a «0 15px» value which means that space is between the horizontal rows. In the second example, we use a «20px 0 » value which means that space is between the vertical rows.

A problem?!

Let’s give some background to our table to see what we’re talking about, so:

table < border-collapse: separate; border-spacing: 20px 0; background: khaki; /* add this line */ >

What if we want inner borders to be removed between the columns in this example? Now we have it in outer space of Employee ID and Age columns.

Ok, let’s fix this together!

Remove the border-collapse: separate and border-spacing: 20px 0 from the table CSS.

Now, we will add the border-spacing: 20px 0 on each td of our table, instead of the whole table.

We should also add a display property of the block to have it work the way we want it to.

So, our changes would be like this:

table < background: khaki; > table tbody < display: block; border-spacing: 20px 0; >

The result will be the same as before. Now, its’ time for us to delete the left and right outer border space. It can be done quickly by just adding the negative margin to the left and right of each td element so that it will remove that space for us.

table < background: khaki; > table tbody < margin: 0 -20px; /* add this line, -20px margin to left and right, 20px is based on the border-spacing amount which is 20 px in this example */ display: block; border-spacing: 20px 0; >

And here we go! This is precisely what we wanted! As you see, the left and right outer space have gone for good!

Now you can remove the background color as well and have your beautiful table!

Hope you enjoyed it, have a good time!

Источник

CSS border-collapse Property

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

Default value:	separate
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.borderCollapse=»collapse» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
separate	Borders are separated; each cell will display its own borders. This is default.	Demo ❯
collapse	Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

When using «border-collapse: separate», the border-spacing property can be used to set the space between the cells:

Example

When using «border-collapse: collapse», the cell that appears first in the code will «win»:

table, td, th <
border: 3px solid red;
>

#table1 border-collapse: collapse;
border-color: blue;
>

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

border-collapse

The border-collapse CSS property sets whether cells inside a have shared or separate borders.

Try it

When cells are collapsed, the border-style value of inset behaves like ridge , and outset behaves like groove .

When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

/* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: revert-layer; border-collapse: unset; 

The border-collapse property is specified as a single keyword, which may be chosen from the list below.

Values

Adjacent cells have shared borders (the collapsed-border table rendering model).

Adjacent cells have distinct borders (the separated-border table rendering model).

Formal definition

Formal syntax

Examples

A colorful table of browser engines

HTML

table class="separate"> caption> code>border-collapse: separatecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table> table class="collapse"> caption> code>border-collapse: collapsecode> caption> tbody> tr> th>Browserth> th>Layout Engineth> tr> tr> td class="fx">Firefoxtd> td class="gk">Geckotd> tr> tr> td class="ed">Edgetd> td class="tr">EdgeHTMLtd> tr> tr> td class="sa">Safaritd> td class="wk">Webkittd> tr> tr> td class="ch">Chrometd> td class="bk">Blinktd> tr> tr> td class="op">Operatd> td class="bk">Blinktd> tr> tbody> table> 

CSS

.collapse  border-collapse: collapse; > .separate  border-collapse: separate; > table  display: inline-table; margin: 1em; border: dashed 5px; > table th, table td  border: solid 3px; > .fx  border-color: orange blue; > .gk  border-color: black red; > .ed  border-color: blue gold; > .tr  border-color: aqua; > .sa  border-color: silver blue; > .wk  border-color: gold blue; > .ch  border-color: red yellow green blue; > .bk  border-color: navy blue teal aqua; > .op  border-color: red; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник