编程笔记 html5&css&js 051 CSS表格2-2
- 一、html表格如何按列设置样式？
- 二、练习
- 小结
多数时候是按列设计表格样式的。
一、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; /* 设置垂直对齐方式为顶部 */
}
二、练习
<!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>小结
按列设置样式列具实用性。
)
