Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
<html>
<head>
<style>
th, td {
border: 1px solid blue;
padding: 5px;
text-align: left;
}
table {
border-collapse: separate;
border: 3px dotted green;
border-spacing: 3rem;
}
</style>
</head>
<body>
<h3> Using the border-spacing CSS property to add spaces between table cells </h3>
<table>
<tr>
<th> Country </th>
<th> Capital </th>
<th> Population </th>
</tr>
<tr>
<td> India </td>
<td> New Delhi </td>
<td> 1.3 billion </td>
</tr>
<tr>
<td> China </td>
<td> Beijing </td>
<td> 1.4 billion </td>
</tr>
<tr>
<td> United States </td>
<td> Washington, D.C. </td>
<td> 325 million </td>
</tr>
<tr>
<td> Indonesia </td>
<td> Jakarta </td>
<td> 250 million </td>
</tr>
</table>
</body>
</html>
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.
<html>
<head>
<style>
th, td {
border: 1px solid blue;
padding: 5px;
text-align: left;
}
table {
border-collapse: separate;
border: 3px dotted green;
}
</style>
</head>
<body>
<h3> Using the <i> border-spacing </i> CSS property to add spaces between table cells </h3>
<p> Enter a value in px to set space between table cells </p>
<input type="number" id="space">
<br> <br>
<table id = "nameTable">
<tr>
<th> Firstname </th>
<th> Lastname </th>
<th> Age </th>
</tr>
<tr>
<td> Jill </td>
<td> Smith </td>
<td> 50 </td>
</tr>
<tr>
<td> Eve </td>
<td> Jackson </td>
<td> 94 </td>
</tr>
<tr>
<td> John </td>
<td> Doe </td>
<td> 80 </td>
</tr>
</table>
<script>
var table = document.getElementById("nameTable");
let space = document.getElementById("space");
space.addEventListener('input', function () {
table.style.borderSpacing = space.value + "px";
});
</script>
</body>
</html>
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.
388 Views
