编程笔记 html5&css&js 051 CSS表格2-2
多数时候是按列设计表格样式的。
一、html表格如何按列设置样式？
在HTML表格中，可以通过CSS来按列设置样式。以下是一个简单的例子：
<style>
/* 选择第一列（索引从0开始） */
table tr td:first-child {
background-color: #ffcc99; /* 设置背景色 */
font-weight: bold; /* 设置字体加粗 */
}
/* 选择第二列 */
table tr td:nth-child(2) {
color: red; /* 设置字体颜色 */
text-align: center; /* 设置文本居中对齐 */
}
/* 选择第三列 */
table tr td:nth-child(3) {
width: 150px; /* 设置列宽 */
vertical-align: top; /* 设置垂直对齐方式为顶部 */
}
在这个例子中，我们使用了CSS伪类选择器first-child和nth-child(n)来分别选择表格的每一列，并分别为它们设置了不同的样式。
二、练习
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>css列表 编程笔记 html5&css&js</title>
<meta charset="utf-8" />
<style>
body {
color: cyan;
background-color: teal;
}
#customers {
border-collapse: collapse;
width: 90%;
margin: 50px auto;
text-align: center;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
background-color: #4caf50;
color: white;
}
/* 选择第一列 */
table tr td:first-child {
background-color: #ffcc99; /* 设置背景色 */
font-weight: bold; /* 设置字体加粗 */
}
/* 选择第二四六列 */
table tr td:nth-child(2),
table tr td:nth-child(4),
table tr td:nth-child(6) {
color: red; /* 设置字体颜色 */
text-align: center; /* 设置文本居中对齐 */
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>课节</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>第一节</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>外语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第二节</td>
<td>语文</td>
<td>数学</td>
<td>科学</td>
<td>外语</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第三节</td>
<td>科学</td>
<td>数学</td>
<td>语文</td>
<td>外语</td>
<td>政治</td>
<td>活动</td>
<td></td>
</tr>
<tr>
<td>第四节</td>
<td>科学</td>
<td>数学</td>
<td>语文</td>
<td>外语</td>
<td>政治</td>
<td>活动</td>
<td></td>
</tr>
<tr>
<td>中午</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第五节</td>
<td>音乐</td>
<td>体育</td>
<td>艺术</td>
<td>阅读</td>
<td>游戏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第六节</td>
<td>音乐</td>
<td>体育</td>
<td>艺术</td>
<td>阅读</td>
<td>游戏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>班会</td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>班会</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
小结
按列设置样式列具实用性。