Which table property specifies the width that should appear between table cells in CSS?

In HTML, a table contains columns and rows. The table cells don?t contain the space between two cells by default. If we add some space between table cells, it can improve the UI of the table.

In CSS, the ?border-spacing? property adds the space between the table space. Also, we need to use the ?border-collapse? CSS property with the ?separate? value while using the ?border-spacing? CSS property.

Syntax

Users can follow the syntax below to use the ?border-spacing? CSS property to add spaces between the table cells.

table {
   border-collapse: separate;
   border-spacing: 3rem;
}

In the above syntax, we have used the ?border-collapse? and ?border-spacing? CSS properties for the table element.

Example

In the example below, the table contains the data of various countries, and it has three columns containing the country name, capital, and population.

We have used the ?border-sapcing? CSS property to add the space of 3rem between two rows and two columns. In the output, users can observe the spacing between the table cells.

   


   
 Using the border-spacing CSS property to add spaces between table cells 
   

Example

In the example below, we have created the table containing the person's first name, last name, and age. Furthermore, we have created the input box to take a number input from the users.

We have accessed the number input in JavaScript and added the ?input? event. So, whenever users change the value of the number input, it will change the value of the ?border-spacing? CSS property and increase and decrease the spacing value based on that.

   


   
 Using the  border-spacing  CSS property to add spaces between table cells 
   
 Enter a value in px to set space between table cells 
   
   
 

   

Conclusion

Users learned to use the ?border-spacing? CSS property to add the spaces between the table cells. Also, users always require to set the ?border-collaps? to ?separate? to add spacing between cells.