在CSS中设置cellpadding和cellspacing

技术背景

在网页开发中，表格是常用的元素之一。传统的HTML中，我们可以使用cellpadding和cellspacing属性来控制表格单元格的内边距和间距。但随着CSS的发展，我们更倾向于使用CSS来实现这些样式，以提高代码的可维护性和灵活性。

实现步骤

设置cellpadding

在CSS中，使用padding属性来控制表格单元格的内边距。示例代码如下：

td, th {
    padding: 10px;
}

上述代码为表格的单元格（td和th）设置了10px的内边距。

设置cellspacing

使用border-spacing属性来设置表格单元格之间的间距。示例代码如下：

table {
    border-spacing: 10px;
    border-collapse: separate;
}

这里需要注意，border-collapse属性必须设置为separate，否则border-spacing属性将不起作用。

核心代码

设置cellpadding和cellspacing

table {
    border-spacing: 10px;
    border-collapse: separate;
}
td, th {
    padding: 10px;
}

兼容旧版IE

对于Internet Explorer 6和7，可以使用以下代码：

table {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
    padding: 10px;
}

*声明是针对IE 6和7的，其他浏览器会忽略它。

最佳实践

重置表格样式

为了避免不同浏览器的默认样式影响，可以在reset.css文件中添加以下代码：

table {
    border: 0;
    border-spacing: 0px;
    border-collapse: collapse;
}
table td {
    padding: 0px;
}

不同效果设置

• 默认效果

table  {border-collapse: collapse;}
td, th {padding: 0px;}

• 设置cellpadding

table  {border-collapse: collapse;}
td, th {padding: 6px;}

• 设置cellspacing

table  {border-spacing: 2px;}
td, th {padding: 0px;}

• 同时设置cellpadding和cellspacing

table  {border-spacing: 2px;}
td, th {padding: 6px;}

• 特殊设置（不同水平和垂直间距）

table  {border-spacing: 8px 2px;}
td, th {padding: 6px;}

常见问题

IE 5 - 7浏览器兼容性问题

border-spacing属性在Internet Explorer 5 - 7中不被支持。如果要消除单元格间距（cellspacing="0"），可以使用border-collapse: collapse，但它不会覆盖表格元素上现有的cellspacing HTML属性。示例代码如下：

table {
    border-spacing: 0;
    border-collapse: collapse;
}

margin属性无效问题

在表格单元格上设置margin属性通常不会有效果。如果需要设置间距，建议使用border-spacing属性。如果margin不起作用，可以尝试将tr的display属性设置为block。示例代码如下：

tr {
    display: block;
}
td {
    margin: 10px;
}