Controlling Spacing Between Table Cells

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



Leave a reply



Submit