Html 是否有必要在 <table> 中添加 cellpacing="0" cellpadding="0"?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2078309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it necessary to add cellspacing="0" cellpadding="0" in <table>?
提问by Jitendra Vyas
Eric meyer reset css is suggesting "tables still need 'cellspacing="0"' in the markup". Is it necessary? and what is the benefit of border-collapse: collapse
; and border-spacing: 0;
?
Eric meyer reset css 建议“表格在标记中仍然需要 'cellspacing="0"'”。有必要吗?以及有什么好处border-collapse: collapse
;和border-spacing: 0;
?
and it's only suggesting to use cellspacing, while table has another property called cellpadding?
它只是建议使用单元格间距,而表还有另一个称为单元格填充的属性?
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
采纳答案by Nicole
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.
cellpadding
不建议使用,因为padding
css 属性足以覆盖cellpadding
table 属性的默认属性。正如另一个答案所说,cellspacing
旧浏览器中没有兼容的 CSS 属性,留下 HTML 属性作为将此设置完全“重置”为 0 的唯一方法。为 border-spacing: 0;
支持它的浏览器处理此问题。
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
相邻单元格之间的边框合并在一起,呈现(通常是单像素)网格的外观,当cellspacing="0"
. 在border-collapse
普遍支持之前,这就是为什么您会在表格上看到带有cellspacing="1"
背景颜色的表格,而在表格单元格上看到白色背景的原因。
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.
border-collapse:collapse;
在 reset.css 中只是因为它是最常见的期望结果。如果你不想要这种模式,你可以从 reset.css 中删除它。
回答by Doug Neiner
Internet Explorer 6 and7, and probably other early browsers, do not recognize the border-spacing
attribute and as such, he suggests you still supply the values in the HTML as well.
Internet Explorer 6和7,可能还有其他早期浏览器,不识别该border-spacing
属性,因此,他建议您仍然在 HTML 中提供值。
回答by Guffa
There are two types of borders in a table, the table itself can have borders (outer borders and borders between cells), and each cell can have borders around them.
表格中有两种边框,表格本身可以有边框(外边框和单元格之间的边框),每个单元格周围可以有边框。
Using border-collapse: collapse;
means that two cells with the same border settings next to each other will only get a single set of bordering instead of a double, e.g. the right border of one cell will collapse with the left border on the next cell in the row.
使用border-collapse: collapse;
意味着相邻的两个具有相同边框设置的单元格只会得到一组边框而不是双边框,例如,一个单元格的右边框将与行中下一个单元格的左边框一起折叠。
There wes no CSS style for the table border between cells until CSS 2, so it has to be disabled using the HTML attribute cellspacing="0"
on the table to support older browsers like IE 7*. If there is table borders between the cells, the border collapsing will naturally not work as the borders are not next to each other.
在 CSS 2 之前,单元格之间的表格边框没有 CSS 样式,因此必须使用cellspacing="0"
表格上的HTML 属性禁用它,以支持较旧的浏览器(如 IE 7*)。如果单元格之间有表格边框,边框折叠自然不会起作用,因为边框彼此不相邻。
* I truly enjoyed the feeling of calling IE 7 an "older browser" ;)
* 我真的很喜欢将 IE 7 称为“旧浏览器”的感觉;)