You can remove spaces between cells in an HTML table by setting the border-collapse
property to collapse on the table element. Here’s an example of how to do this:
HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse; /* collapse table borders */
border-spacing: 0; /* remove space between cells*/
}
This will create an HTML table with two rows and two columns. The table element has the border-collapse
property set to collapse, which means that the borders of the table cells will be collapsed into a single border, eliminating the space between the cells.
The border-spacing
property is also set to ‘0’ to remove any additional space between the cells.
You can also change the value of the border-spacing
property to increase the space between the cells if you want.
You can also use the border-style, border-width and border-color properties to customize the style of the table border.
You can also use the padding
property on td
or th
elements to set the space inside the cells.
Also Read:
- How To Remove White Space Under An Image Using CSS
- What are Pseudo Elements And Pseudo Classes?
- Which CSS Property Is Used To Change The Face Of A Font?
- How To Change Background Opacity Without Affecting Text
- Change The Cursor Into A Hand When A User Hovers Over A List Item?
- How To Horizontally Center A DIV With CSS