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,加强了表格的整体性。
在表格中,td
和th
是重要的元素。padding: 8px;
属性设置了单元格内部的填充值,使得文字与边界之间有一个适当的间隔。而text-align: left;
和vertical-align: middle;
则规定了文本的水平和垂直对齐方式,让表格看起来更整齐。
表头则的样式可以用th
标签进行自定义。在上面的代码中,我们对表头使用了background-color: #eee;
和font-weight: bold;
属性。这样可以使表头与数据区分明显。
最后一个属性是表格中奇偶行背景色的设置,使用了tr:nth-child(even)
语句。这里,我们可以用层级选择器来选择每一行中的偶数行,并设置其背景颜色为#f2f2f2
,增加表格的可读性。