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.
Want to use cellpadding and cellspacing in table by CSS class in different style file
try to this way
used to for cellspacing
table{border-collapse: separate; border-spacing: 3px;}
and cellpadding
td{padding:2px;}
demo
.product_tabel { border: solid 1px red;border-collapse: separate;border-spacing: 3px; border:solid 1px red; }
.product_tabel td, .product_tabel th{border:solid 1px green;padding:2px;}
<table class="product_tabel"><tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr> <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr> <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr> <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr> <tr><td>Hello</td><td>Hello</td><td>Hello</td><td>Hello</td></tr> </table>
Why are cellspacing and cellpadding not CSS styles
Cellspacing :
table { border-collapse: collapse; }
As for cellpadding, you can do
table tr td, table tr th { padding: 0; }
html cellpadding the left side of a cell
This is what css is for... HTML doesn't allow for unequal padding. When you say that you don't want to use style sheets, does this mean you're OK with inline css?
<table>
<tr>
<td style="padding: 5px 10px 5px 5px;">Content</td>
<td style="padding: 5px 10px 5px 5px;">Content</td>
</tr>
</table>
You could also use JS to do this if you're desperate not to use stylesheets for some reason.
What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?
/* cellpadding */
th, td { padding: 5px; }
/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; } /* cellspacing="0" */
/* valign */
th, td { vertical-align: top; }
/* align (center) */
table { margin: 0 auto; }
Is it necessary to add cellspacing=0 cellpadding=0 in table?
cellpadding
is not suggested because the padding
css property sufficiently overrides the default properties for the cellpadding
table attribute. As the other answer says, there is no compatible CSS property for cellspacing
in older browsers, leaving an HTML attribute as the only way to completely "reset" this setting to 0. border-spacing: 0;
takes care of this for browsers which do support it.
As for border-collapse
— by default, table cells each have their own border, and collapse
will merge the borders between adjacent cells together, giving the appearance of a (usually single-pixel) grid, which isn't achievable any other way when cellspacing="0"
. Before border-collapse
was commonly supported, this is why you'd see tables with cellspacing="1"
and a background color on the table, and white backgrounds on table cells.
border-collapse:collapse;
is in the reset.css simply because it is the most common desired result. If you don't want this mode, you'd be fine removing this from the reset.css.
Table width border cellspacing cellpadding all 0 in HTML5 error validation
You could avoid all those attributes with
table {
border-collapse: collapse;
width: 600px;
}
table td {
vertical-align: top;
text-align: left
}
and write a simpler markup
<table>
<tr>
<td>TD 1 must be 200px width </td>
<td>TD 2 must be 200px width </td>
<td>TD 3 must be 200px width </td>
</tr>
</table>
Example: http://codepen.io/anon/pen/LVVEmw (border inserted just for clarity purpose)
As you can see every cell is automatically 200px wide
How do you specify table padding in CSS? ( table, not cell padding )
The easiest/best supported method is to use <table cellspacing="10">
The css way: border-spacing (not supported by IE I don't think)
<!-- works in firefox, opera, safari, chrome --> <style type="text/css"> table.foobar { border: solid black 1px; border-spacing: 10px; } table.foobar td { border: solid black 1px; } </style> <table class="foobar" cellpadding="0" cellspacing="0"> <tr><td>foo</td><td>bar</td></tr> </table>
Related Topics
In ASP.NET.Mvc, What Is the Correct Way to Reference Images Inside of CSS
Scale an Image to Maximally Fit Available Space and Center It
Simulating Color Stops in Gradients for Ie
Remove Conflicting Styling - Bootstrap & Google Custom Search
Using Background-Attachment:Fixed in Safari on The Ipad
Select First Descendant with CSS
How to Make The Width of My <Figcaption> Match The Width of The <Img> Inside Its <Figure> Tag
Ng-Animate: Conditionally Switching "Back" Transition (Bug)
Jw Player: Cross-Browser "Display:None" Player Behavior
Svg Transform-Origin Problems in Firefox
Wrap Text Around an Image on Bootstrap 3
How Does CSS Scale Transform Affect Document Flow
How to Make the Absolute Child Width Independent from the Relative Parent Width
Make a Div Appear on Hover Over Another Div
Is There a Shortcut for Setting !Important on Every Property in a CSS File