青少年编程与数学 01-006 设计网页的外观 4课题、表格
本文介绍如何使用 CSS 改善 HTML 表格的外观。
“数据是新时代的原油，而表格则是提炼它的最佳工具。”
“Data is the new oil of the digital era, and tables are the best tools to refine it.”
—— 克劳德·香农 (Claude Shannon) | 美国数学家、信息理论之父 | 1916 ~ 2001
“表格和图表是展示复杂数据的清晰语言。”
“Tables and charts are the clear language for presenting complex data.”
—— 爱德华·塔夫特 (Edward Tufte) | 美国统计学家、信息设计师 | 1942 ~ 至今
“在科学研究中，表格是组织和展示实验结果的基石。”
“In scientific research, tables are the cornerstone for organizing and presenting experimental results.”
—— 伊恩·辛克莱 (Ian Sinclair) | 英国药理学家 | 1943 ~ 至今
“良好的表格设计能够使信息的传递更加高效。”
“Good table design can make the transmission of information more efficient.”
—— 威廉·斯皮尔斯 (William S. Spears) | 美国计算机科学家 | 1960 ~ 至今
课题摘要
本文介绍如何使用 CSS 改善 HTML 表格的外观。
课题要求
掌握HTML表格的样式设置。
一、表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
下例为 <table>、<th> 和 <td> 元素规定了黑色边框：
table, th, td {
border: 1px solid black;
}
二、全宽表格
在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：
table {
width: 100%;
}
双边框
请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。
如需删除双边框，请看下面的例子。
三、合并表格边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：
table {
border: 1px solid black;
}
四、表格宽度和高度
表格的宽度和高度由 width 和 height 属性定义。
下例将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px：
table {
width: 100%;
}
th {
height: 50px;
}
要创建仅占页面一半的表，请使用 width: 50%：
table {
width: 50%;
}
th {
height: 70px;
}
五、水平对齐
text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。
默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。
要使 <td> 元素的内容也居中对齐，请使用 text-align: center：
th {
text-align: center;
}
文本左对齐：
th {
text-align: left;
}
六、垂直对齐
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。下例将 <td> 元素的垂直文本对齐方式设置为下对齐：
td {
height: 50px;
vertical-align: bottom;
}
七、表格内边距
如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：
th, td {
padding: 15px;
text-align: left;
}
水平分隔线
向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：
th, td {
border-bottom: 1px solid #ddd;
}
八、可悬停表格
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
tr:hover {background-color: #f5f5f5;}
九、条状表格
为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：
tr:nth-child(even) {background-color: #f2f2f2;}
十、表格颜色
下例指定了 <th> 元素的背景颜色和文本颜色：
th {
background-color: #4CAF50;
color: white;
}
十一、响应式表格
如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：
在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
十二、CSS 表格属性
属性 描述
border 简写属性。在一条声明中设置所有边框属性。
border-collapse 规定是否应折叠表格边框。
border-spacing 规定相邻单元格之间的边框的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
table-layout 设置用于表格的布局算法。
编程笔记 html5&css&js 051 CSS表格2-2
多数时候是按列设计表格样式的。
十三、按列设置样式
在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;
}
#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;
text-align: left;
background-color: #4caf50;
color: white;
}
</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>
课题作业
完成文档中代码的练习。
附录一、人物介绍：格雷·多南
格雷·多南（Graydon Hoare）是一位知名的软件工程师，以其在编程语言和系统开发方面的贡献而闻名。他最突出的成就是在开发Rust编程语言方面的工作，这是一种注重安全、并发和性能的系统编程语言。以下是关于格雷·多南的一些重要信息：
职业背景：格雷·多南在Mozilla工作期间，对Rust语言的开发起到了关键作用。他不仅参与了语言的设计，还是早期实现的主要贡献者。
Rust语言：多南对Rust语言的贡献包括其内存安全模型和所有权系统，这些特性使得Rust在系统编程领域中独树一帜。
开源贡献：作为一名开源贡献者，多南在多个项目中都有显著的贡献，特别是在推动Rust语言的发展和普及方面。
技术影响力：他的工作对现代编程语言的设计有着深远的影响，特别是在如何通过语言特性来增强程序的安全性和效率方面。
职业生涯：除了在Mozilla的工作外，格雷·多南还在其他技术公司担任过高级职位，继续在软件工程领域内发挥着重要作用。
格雷·多南的工作和成就在编程语言社区中得到了广泛的认可和尊重。他对技术的贡献，特别是在系统编程和语言设计的创新上，为软件开发领域带来了宝贵的价值。
![[C++] 深度剖析C_C++内存管理机制](https://img-blog.csdnimg.cn/img_convert/b4aee98de837fd2189aba9db0d845f84.png)
