淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中的table标签属性可以用于调整HTML表格的样式。可以设置表格的边框、背景颜色、表头、行和列等属性。

table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 边框间距 */
width: 100%;
}
td, th {
padding: 8px;
text-align: left;
vertical-align: middle;
}
th {
background-color: #eee;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}

上面这些属性对于表格的样式定制相当重要。其中,border-collapse: collapse;可以将表格中相邻单元格之间的边框合并,让表格看起来更整洁。而border-spacing: 0;将边框间距设置为0,加强了表格的整体性。

在表格中,tdth是重要的元素。padding: 8px;属性设置了单元格内部的填充值,使得文字与边界之间有一个适当的间隔。而text-align: left;vertical-align: middle;则规定了文本的水平和垂直对齐方式,让表格看起来更整齐。

表头则的样式可以用th标签进行自定义。在上面的代码中,我们对表头使用了background-color: #eee;font-weight: bold;属性。这样可以使表头与数据区分明显。

最后一个属性是表格中奇偶行背景色的设置,使用了tr:nth-child(even)语句。这里,我们可以用层级选择器来选择每一行中的偶数行,并设置其背景颜色为#f2f2f2,增加表格的可读性。