Controlling Spacing Between Table Cells
Use the border-spacing
property on the table
element to set the spacing between cells.
Make sure border-collapse
is set to separate
(or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).
Set cellpadding and cellspacing in CSS?
Basics
For controlling "cellpadding" in CSS, you can simply use padding
on table cells. E.g. for 10px of "cellpadding":
td {
padding: 10px;
}
For "cellspacing", you can apply the border-spacing
CSS property to your table. E.g. for 10px of "cellspacing":
table {
border-spacing: 10px;
border-collapse: separate;
}
This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".
Issues in IE ≤ 7
This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse
property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0"
) then border-collapse:collapse
should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing
HTML attribute on the table element.
In short: for non-Internet Explorer 5-7 browsers, border-spacing
handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.
HTML table cell spacing - only between cells, no outer one
This will be tricky a little bit...you will need to set display:block
and border-spacing:10px
for spacing between cells and same negative margin:-10px
to remove the outer spacing
Stack Snippet
table { font: bold 13px Verdana; background: black; margin: 30px auto; border-spacing: 0;}
table td { padding: 30px; background: red; color: #fff;}
table tbody { margin: -10px; display: block; border-spacing: 10px;}
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr></table>
Is it possible to simulate spacing between table cells such that vertical and horizontal spacing are different?
You can specify different spacings for horizontal and vertical edges for border-spacing
or related properties. Just specify more than one measurement. e.g.,
border-spacing: 1px 2px;
How to add space between table cells?
Seems this do the trick:
table {
border-spacing: 10px;
border-collapse: separate;
}
This is what you're looking for?
How do I apply only horizontal cell spacing to a HTML table?
A better way than setting cellspacing="10"
is to use CSS. You can use the following CSS to target the table's cell spacing.
table {
border-spacing: 10px 0;
}
The first value specifies the horizontal spacing, and the second value specifies the vertical spacing.
CSS: how do I create a gap between rows in a table?
All you need:
table {
border-collapse: separate;
border-spacing: 0 1em;
}
That assumes you want a 1em
vertical gap, and no horizontal gap. If you're doing this, you should probably also look at controlling your line-height.
Sort of weird that some of the answers people gave involve border-collapse: collapse
, whose effect is the exact opposite of what the question asked for.
What is the correct way to add space to an HTML table?
As for cellpadding and cellspacing - they are not supported in HTML5 (See:
https://www.w3schools.com/tags/att_table_cellpadding.asp
https://www.w3schools.com/tags/att_table_cellspacing.asp).
As for the margin property, it can be used to space the whole table, but it does not apply for the space between cells (https://developer.mozilla.org/en-US/docs/Web/CSS/margin). For space between cells use the border-spacing property (https://www.w3schools.com/cssref/pr_border-spacing.asp). for space within cells simply use padding.
Related Topics
How to Display HTML Tags as Text
HTML5 Input for Money/Currency
Arrange 2 Items Per Row Using Flexbox
After Pseudo Element Not Appearing in Code
Why Are Horizontal Scroll Bars Shown on My Website
Show My Location on Google Maps API V3
Bootstrap 4 Collapsing Two Navbars into One Toggle Button
How Is CSS Applied by The Browser, and Are Repaints Affected by It
Fixed Positioning/Z-Index Issue in Mobile Safari
How to Put Table in The Center of The Page Using CSS
Page Height to 100% of Viewport
Why Is My Background Color Not Showing If I Have Display: Inline
Flip/Mirror an Image Horizontally + Vertically with CSS
No Video with Supported Format and Mime Type Found. What Does This Mean and How to Change This
How to Convert Escape Characters in HTML Tags
Does CSS Grid Have a Flex-Grow Function
Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container