[HTML]Web前端开发技术15（HTMLCSSJavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页
在HTML中，表格的边框颜色可以通过CSS来设置。如果你想设置表格的亮边框颜色和暗边框颜色，可以使用CSS的border-color和border属性。
以下是一个简单的例子，展示如何设置表格的亮边框颜色和暗边框颜色：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse; /* 移除表格之间的间隔 */
}
table, th, td {
border: 1px solid black; /* 设置边框宽度和样式 */
}
th {
height: 50px;
background-color: #f2f2f2; /* 设置表头背景色 */
}
td {
padding: 10px;
}
/* 设置亮边框颜色 */
th, td {
border-color: #555;
}
/* 设置暗边框颜色 */
table tr:nth-child(odd) {
background-color: #f9f9f9;
}
table tr:nth-child(even) {
background-color: #fdfdfd;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
<!-- 更多行... -->
</table>
</body>
</html>在这个例子中，我们使用CSS选择器为表格的表头(th)和数据单元格(td)设置了亮边框颜色，并且通过:nth-child伪类选择器为奇数行和偶数行设置了不同的背景色作为暗边框颜色。border-collapse: collapse; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。
评论已关闭