楚雄做网站建设的公司,wordpress 数字指纹,佛山新网站建设平台,wordpress分类自定义字段调用编程笔记 html5cssjs 051 CSS表格2-2 一、html表格如何按列设置样式#xff1f;二、练习小结 多数时候是按列设计表格样式的。 一、html表格如何按列设置样式#xff1f;
在HTML表格中#xff0c;可以通过CSS来按列设置样式。以下是一个简单的例子#xff1a;
… 编程笔记 html5cssjs 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; /* 设置垂直对齐方式为顶部 */
}在这个例子中我们使用了CSS伪类选择器first-child和nth-child(n)来分别选择表格的每一列并分别为它们设置了不同的样式。
二、练习
!DOCTYPE html
html langzh-cnheadtitlecss列表 编程笔记 html5cssjs/titlemeta charsetutf-8 /stylebody {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/headbodytable idcustomerstrth课节/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/thth星期六/thth星期日/th/trtrtd第一节/tdtd语文/tdtd数学/tdtd科学/tdtd外语/tdtd数学/tdtd/tdtd/td/trtrtd第二节/tdtd语文/tdtd数学/tdtd科学/tdtd外语/tdtd数学/tdtd/tdtd/td/trtrtd第三节/tdtd科学/tdtd数学/tdtd语文/tdtd外语/tdtd政治/tdtd活动/tdtd/td/trtrtd第四节/tdtd科学/tdtd数学/tdtd语文/tdtd外语/tdtd政治/tdtd活动/tdtd/td/trtrtd中午/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtd/td/trtrtd第五节/tdtd音乐/tdtd体育/tdtd艺术/tdtd阅读/tdtd游戏/tdtd/tdtd/td/trtrtd第六节/tdtd音乐/tdtd体育/tdtd艺术/tdtd阅读/tdtd游戏/tdtd/tdtd/td/trtrtd第七节/tdtd/tdtd/tdtd/tdtd/tdtd班会/tdtd/tdtd/td/trtrtd第七节/tdtd/tdtd/tdtd/tdtd/tdtd班会/tdtd/tdtd/td/tr/table/body
/html
小结
按列设置样式列具实用性。
