In an HTML table, the cellpadding and cellspacing can be set like this:
<table cellspacing="1" cellpadding="1">
How can the same be accomplished using CSS?
This question is related to
html
css
html-table
alignment
The answer is
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.
Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:
the first one uses the default value for
border-collapse(separate) and usesborder-spacingto provide the cellspacing,the second one switches
border-collapsetocollapseand uses theborderproperty as the cellspacing.
In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.
First method:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>Second method:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>I used !important after the border-collapse like
border-collapse: collapse !important;
and it works for me in IE7. It seems to override the cellspacing attribute.
You can simply do something like this in your CSS, using border-spacing and padding:
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
_x000D_
td, th {_x000D_
padding: 1em;_x000D_
border: 1px solid blue;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>head_1</th>_x000D_
<th>head_2</th>_x000D_
<th>head_3</th>_x000D_
<th>head_4</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>txt_1</td>_x000D_
<td>txt_2</td>_x000D_
<td>txt_3</td>_x000D_
<td>txt_4</td>_x000D_
</tr>_x000D_
</table>Just use border-collapse: collapse for your table, and padding for th or td.
This worked for me:
table {border-collapse: collapse}
table th, table td {padding: 0}
This style is for full reset for tables - cellpadding, cellspacing and borders.
I had this style in my reset.css file:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
In an HTML table, the cellpadding and cellspacing can be set like this:
For cell-padding:
Just call simple td/th cell padding.
Example:
/******Call-Padding**********/_x000D_
_x000D_
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
_x000D_
td {_x000D_
border: 1px solid red;_x000D_
padding: 10px;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>Head1 </th>_x000D_
<th>Head2 </th>_x000D_
<th>Head3 </th>_x000D_
<th>Head4 </th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>11</td>_x000D_
<td>12</td>_x000D_
<td>13</td>_x000D_
<td>14</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>21</td>_x000D_
<td>22</td>_x000D_
<td>23</td>_x000D_
<td>24</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>31</td>_x000D_
<td>32</td>_x000D_
<td>33</td>_x000D_
<td>34</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>41</td>_x000D_
<td>42</td>_x000D_
<td>43</td>_x000D_
<td>44</td>_x000D_
</tr>_x000D_
</table>table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
}
For cell-spacing
Just call simple table border-spacing
Example:
/********* Cell-Spacing ********/_x000D_
table {_x000D_
border-spacing: 10px;_x000D_
border-collapse: separate;_x000D_
}_x000D_
_x000D_
td {_x000D_
border: 1px solid red;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>Head1</th>_x000D_
<th>Head2</th>_x000D_
<th>Head3</th>_x000D_
<th>Head4</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>11</td>_x000D_
<td>12</td>_x000D_
<td>13</td>_x000D_
<td>14</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>21</td>_x000D_
<td>22</td>_x000D_
<td>23</td>_x000D_
<td>24</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>31</td>_x000D_
<td>32</td>_x000D_
<td>33</td>_x000D_
<td>34</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>41</td>_x000D_
<td>42</td>_x000D_
<td>43</td>_x000D_
<td>44</td>_x000D_
</tr>_x000D_
</table>/********* Cell-Spacing ********/
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
border: 1px solid red;
}
More table style by CSS source link here you get more table style by CSS.
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
You can check the below code just create a index.html and run it.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>OUTPUT :
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
So the CSS will be,
div.cellwidener {_x000D_
margin: 0px 15px 0px 15px;_x000D_
}_x000D_
td.tight {_x000D_
padding: 0px;_x000D_
}<table border="0">_x000D_
<tr>_x000D_
<td class="tight">_x000D_
<div class="cellwidener">My content</div>_x000D_
</td>_x000D_
</tr>_x000D_
</table>Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.
Try this:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Or try this:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
You can check the below code just create a index.html and run it.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>OUTPUT :
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
If margin didn't work, try to set display of tr to block and then margin will work.
How about adding the style directly to the table itself? This is instead of using table in your CSS, which is a BAD approach if you have multiple tables on your page:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
The simple solution to this problem is:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
For tables, cellspacing and cellpadding are obsolete in HTML 5.
Now for cellspacing you have to use border-spacing. And for cellpadding you have to use border-collapse.
And make sure you don't use this in your HTML5 code. Always try to use these values in a CSS 3 file.
You can simply do something like this in your CSS, using border-spacing and padding:
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
_x000D_
td, th {_x000D_
padding: 1em;_x000D_
border: 1px solid blue;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>head_1</th>_x000D_
<th>head_2</th>_x000D_
<th>head_3</th>_x000D_
<th>head_4</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>txt_1</td>_x000D_
<td>txt_2</td>_x000D_
<td>txt_3</td>_x000D_
<td>txt_4</td>_x000D_
</tr>_x000D_
</table>table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
Simply use CSS padding rules with table data:
td {
padding: 20px;
}
And for border spacing:
table {
border-spacing: 1px;
border-collapse: collapse;
}
However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.
For tables, cellspacing and cellpadding are obsolete in HTML 5.
Now for cellspacing you have to use border-spacing. And for cellpadding you have to use border-collapse.
And make sure you don't use this in your HTML5 code. Always try to use these values in a CSS 3 file.
This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.
expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.
In an HTML table, the cellpadding and cellspacing can be set like this:
For cell-padding:
Just call simple td/th cell padding.
Example:
/******Call-Padding**********/_x000D_
_x000D_
table {_x000D_
border-collapse: collapse;_x000D_
}_x000D_
_x000D_
td {_x000D_
border: 1px solid red;_x000D_
padding: 10px;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>Head1 </th>_x000D_
<th>Head2 </th>_x000D_
<th>Head3 </th>_x000D_
<th>Head4 </th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>11</td>_x000D_
<td>12</td>_x000D_
<td>13</td>_x000D_
<td>14</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>21</td>_x000D_
<td>22</td>_x000D_
<td>23</td>_x000D_
<td>24</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>31</td>_x000D_
<td>32</td>_x000D_
<td>33</td>_x000D_
<td>34</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>41</td>_x000D_
<td>42</td>_x000D_
<td>43</td>_x000D_
<td>44</td>_x000D_
</tr>_x000D_
</table>table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
}
For cell-spacing
Just call simple table border-spacing
Example:
/********* Cell-Spacing ********/_x000D_
table {_x000D_
border-spacing: 10px;_x000D_
border-collapse: separate;_x000D_
}_x000D_
_x000D_
td {_x000D_
border: 1px solid red;_x000D_
}<table>_x000D_
<tr>_x000D_
<th>Head1</th>_x000D_
<th>Head2</th>_x000D_
<th>Head3</th>_x000D_
<th>Head4</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>11</td>_x000D_
<td>12</td>_x000D_
<td>13</td>_x000D_
<td>14</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>21</td>_x000D_
<td>22</td>_x000D_
<td>23</td>_x000D_
<td>24</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>31</td>_x000D_
<td>32</td>_x000D_
<td>33</td>_x000D_
<td>34</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>41</td>_x000D_
<td>42</td>_x000D_
<td>43</td>_x000D_
<td>44</td>_x000D_
</tr>_x000D_
</table>/********* Cell-Spacing ********/
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
border: 1px solid red;
}
More table style by CSS source link here you get more table style by CSS.
table {
border-spacing: 4px;
color: #000;
background: #ccc;
}
td {
padding-left: 4px;
}
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
So the CSS will be,
div.cellwidener {_x000D_
margin: 0px 15px 0px 15px;_x000D_
}_x000D_
td.tight {_x000D_
padding: 0px;_x000D_
}<table border="0">_x000D_
<tr>_x000D_
<td class="tight">_x000D_
<div class="cellwidener">My content</div>_x000D_
</td>_x000D_
</tr>_x000D_
</table>Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.
How about adding the style directly to the table itself? This is instead of using table in your CSS, which is a BAD approach if you have multiple tables on your page:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
This hack works for Internet Explorer 6 and later, Google Chrome, Firefox, and Opera:
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
The * declaration is for Internet Explorer 6 and 7, and other browsers will properly ignore it.
expression('separate', cellSpacing = '10px') returns 'separate', but both statements are run, as in JavaScript you can pass more arguments than expected and all of them will be evaluated.
I used !important after the border-collapse like
border-collapse: collapse !important;
and it works for me in IE7. It seems to override the cellspacing attribute.
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Default
The default behavior of the browser is equivalent to:
table {border-collapse: collapse;}
td {padding: 0px;}
Cellpadding
Sets the amount of space between the contents of the cell and the cell wall
table {border-collapse: collapse;}
td {padding: 6px;}
Cellspacing
Controls the space between table cells
table {border-spacing: 2px;}
td {padding: 0px;}
Both
table {border-spacing: 2px;}
td {padding: 6px;}
Both (special)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Note: If there is
border-spacingset, it indicatesborder-collapseproperty of the table isseparate.
Here you can find the old HTML way of achieving this.
From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.
Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...
It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).
Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
If margin didn't work, try to set display of tr to block and then margin will work.
TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...
Anyone else suggesting margins on <td>'s obviously has not tried this.
This worked for me:
table {border-collapse: collapse}
table th, table td {padding: 0}
Just use border-collapse: collapse for your table, and padding for th or td.
table {
border-spacing: 4px;
color: #000;
background: #ccc;
}
td {
padding-left: 4px;
}
I suggest this and all the cells for the particular table are effected.
table.tbl_classname td, th {
padding: 5px 5px 5px 4px;
}
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
This style is for full reset for tables - cellpadding, cellspacing and borders.
I had this style in my reset.css file:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
From what I understand from the W3C classifications is that <table>s are meant for displaying data 'only'.
Based on that I found it a lot easier to create a <div> with the backgrounds and all that and have a table with data floating over it using position: absolute; and background: transparent;...
It works on Chrome, Internet Explorer (6 and later) and Mozilla Firefox (2 and later).
Margins are used (or meant anyways) to create a spacer between container elements, like <table>, <div> and <form>, not <tr>, <td>, <span> or <input>. Using it for anything other than container elements will keep you busy adjusting your website for future browser updates.
The simple solution to this problem is:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Setting margins on table cells doesn't really have any effect as far as I know. The true CSS equivalent for cellspacing is border-spacing - but it doesn't work in Internet Explorer.
You can use border-collapse: collapse to reliably set cell spacing to 0 as mentioned, but for any other value I think the only cross-browser way is to keep using the cellspacing attribute.
You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.
table,_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #666;_x000D_
}_x000D_
_x000D_
table th,_x000D_
table td {_x000D_
padding: 10px;_x000D_
/* Apply cell padding */_x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
_x000D_
<meta charset="utf-8">_x000D_
<title>Set Cellpadding in CSS</title>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Row</th>_x000D_
<th>First Name</th>_x000D_
<th>Last Name</th>_x000D_
<th>Email</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>Clark</td>_x000D_
<td>Kent</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>2</td>_x000D_
<td>Peter</td>_x000D_
<td>Parker</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>John</td>_x000D_
<td>Rambo</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
</html>Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.
table {_x000D_
border-collapse: separate;_x000D_
border-spacing: 10px;_x000D_
/* Apply cell spacing */_x000D_
}_x000D_
_x000D_
table,_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #666;_x000D_
}_x000D_
_x000D_
table th,_x000D_
table td {_x000D_
padding: 5px;_x000D_
/* Apply cell padding */_x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
_x000D_
<meta charset="utf-8">_x000D_
<title>Set Cellspacing in CSS</title>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Row</th>_x000D_
<th>First Name</th>_x000D_
<th>Last Name</th>_x000D_
<th>Email</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>Clark</td>_x000D_
<td>Kent</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>2</td>_x000D_
<td>Peter</td>_x000D_
<td>Parker</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>John</td>_x000D_
<td>Rambo</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
</html>I suggest this and all the cells for the particular table are effected.
table.tbl_classname td, th {
padding: 5px 5px 5px 4px;
}
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.
table,_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #666;_x000D_
}_x000D_
_x000D_
table th,_x000D_
table td {_x000D_
padding: 10px;_x000D_
/* Apply cell padding */_x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
_x000D_
<meta charset="utf-8">_x000D_
<title>Set Cellpadding in CSS</title>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Row</th>_x000D_
<th>First Name</th>_x000D_
<th>Last Name</th>_x000D_
<th>Email</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>Clark</td>_x000D_
<td>Kent</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>2</td>_x000D_
<td>Peter</td>_x000D_
<td>Parker</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>John</td>_x000D_
<td>Rambo</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
</html>Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.
table {_x000D_
border-collapse: separate;_x000D_
border-spacing: 10px;_x000D_
/* Apply cell spacing */_x000D_
}_x000D_
_x000D_
table,_x000D_
th,_x000D_
td {_x000D_
border: 1px solid #666;_x000D_
}_x000D_
_x000D_
table th,_x000D_
table td {_x000D_
padding: 5px;_x000D_
/* Apply cell padding */_x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
_x000D_
<meta charset="utf-8">_x000D_
<title>Set Cellspacing in CSS</title>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table>_x000D_
<thead>_x000D_
<tr>_x000D_
<th>Row</th>_x000D_
<th>First Name</th>_x000D_
<th>Last Name</th>_x000D_
<th>Email</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>Clark</td>_x000D_
<td>Kent</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>2</td>_x000D_
<td>Peter</td>_x000D_
<td>Parker</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>John</td>_x000D_
<td>Rambo</td>_x000D_
<td>[email protected]</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
</html>Try this:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Or try this:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
TBH. For all the fannying around with CSS you might as well just use cellpadding="0" cellspacing="0" since they are not deprecated...
Anyone else suggesting margins on <td>'s obviously has not tried this.
Say that we want to assign a 10px "cellpadding" and a 15px "cellspacing" to our table, in a HTML5-compliant way. I will show here two methods giving really similar outputs.
Two different sets of CSS properties apply to the same HTML markup for the table, but with opposite concepts:
the first one uses the default value for
border-collapse(separate) and usesborder-spacingto provide the cellspacing,the second one switches
border-collapsetocollapseand uses theborderproperty as the cellspacing.
In both cases, the cellpadding is achieved by assigning padding:10px to the tds and, in both cases, the background-color assigned to them is only for the sake of a clearer demo.
First method:
table{border-spacing:15px}
td{background-color:#00eb55;padding:10px;border:0}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>Second method:
table{border-collapse:collapse}
td{background-color:#00eb55;padding:10px;border:15px solid #fff}<table>
<tr>
<td>Header 1</td><td>Header 2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Default
The default behavior of the browser is equivalent to:
table {border-collapse: collapse;}
td {padding: 0px;}
Cellpadding
Sets the amount of space between the contents of the cell and the cell wall
table {border-collapse: collapse;}
td {padding: 6px;}
Cellspacing
Controls the space between table cells
table {border-spacing: 2px;}
td {padding: 0px;}
Both
table {border-spacing: 2px;}
td {padding: 6px;}
Both (special)
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Note: If there is
border-spacingset, it indicatesborder-collapseproperty of the table isseparate.
Here you can find the old HTML way of achieving this.
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.
See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.
table {
border-collapse: separate;
border-spacing: 2px;
}
Also, if you want cellspacing="0", don't forget to add border-collapse: collapse in your table's stylesheet.
Simply use CSS padding rules with table data:
td {
padding: 20px;
}
And for border spacing:
table {
border-spacing: 1px;
border-collapse: collapse;
}
However, it can create problems in older version of browsers like Internet Explorer because of the diff implementation of the box model.
For those who want a non-zero cellspacing value, the following CSS worked for me, but I'm only able to test it in Firefox.
See the Quirksmode link posted elsewhere for compatibility details. It seems it may not work with older Internet Explorer versions.
table {
border-collapse: separate;
border-spacing: 2px;
}
Source: Stackoverflow.com