淘先锋技术网

首页 1 2 3 4 5 6 7

在网页制作中,表格(table)是一种常用的HTML元素。通过CSS样式可以让表格更加美观、易读。

给表格添加CSS样式的方法如下:

/*表格整体样式*/
table {
width: 100%; /*表格宽度占满整个容器*/
border-collapse: collapse; /*合并边框,使表格看起来更整洁*/
}
/*表头样式*/
th {
font-size: 16px; /*字体大小*/
font-weight: bold; /*加粗*/
text-align: center; /*文本居中*/
padding: 10px; /*单元格内边距*/
background-color: #rgba(0, 0, 0, 0.5); /*背景色*/
color: #fff; /*字体颜色*/
}
/*表格数据样式*/
td {
font-size: 14px; /*字体大小*/
text-align: center; /*文本居中*/
padding: 10px; /*单元格内边距*/
border: 1px solid #ccc; /*单元格边框*/
}
/*表格奇偶行变色*/
tr:nth-child(odd) td {
background-color: #EEE; /*奇数行背景色*/
}
tr:nth-child(even) td {
background-color: #FFF; /*偶数行背景色*/
}

通过以上样式设置,我们可以将表格整体样式变得更加美观,表头加粗居中,表格数据添加边框,以及表格奇偶行变色等等,让表格更具有可读性和醒目度。