表格用于在网页中展示结构化的二维数据，使信息更加清晰易读。
东巴文（db-w.cn） 认为：表格是数据展示的重要工具，合理使用表格可以提升信息的可读性和可访问性。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
东巴文表格标签：
| 标签 | 说明 | 是否必需 |
|---|---|---|
<table> |
表格容器 | 必需 |
<tr> |
表格行 | 必需 |
<th> |
表头单元格 | 推荐 |
<td> |
表格单元格 | 必需 |
<table>
<caption>用户信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计：2人</td>
</tr>
</tfoot>
</table>
东巴文表格结构标签：
| 标签 | 说明 | 是否必需 |
|---|---|---|
<caption> |
表格标题 | 推荐 |
<thead> |
表头区域 | 推荐 |
<tbody> |
表格主体 | 推荐 |
<tfoot> |
表格页脚 | 可选 |
东巴文单元格属性：
| 属性 | 说明 | 示例 |
|---|---|---|
colspan |
跨列合并 | colspan="2" |
rowspan |
跨行合并 | rowspan="2" |
headers |
关联表头 | headers="name" |
scope |
表头范围 | scope="col" |
使用colspan属性合并列：
<table>
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>张三</td>
<td>电话：123456</td>
<td>邮箱：zhangsan@example.com</td>
</tr>
</table>
使用rowspan属性合并行：
<table>
<tr>
<th>类别</th>
<th>课程</th>
</tr>
<tr>
<td rowspan="3">前端</td>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
</tr>
</table>
<table>
<caption>东巴文课程表</caption>
<thead>
<tr>
<th rowspan="2">时间</th>
<th colspan="3">课程</th>
</tr>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JavaScript</th>
</tr>
</thead>
<tbody>
<tr>
<td>上午</td>
<td>HTML基础</td>
<td>CSS入门</td>
<td>JS基础</td>
</tr>
<tr>
<td>下午</td>
<td>HTML进阶</td>
<td>CSS布局</td>
<td>JS进阶</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总计：6门课程</td>
</tr>
</tfoot>
</table>
东巴文CSS表格属性：
| 属性 | 说明 | 值 |
|---|---|---|
border-collapse |
边框合并 | collapse, separate |
border-spacing |
边框间距 | 长度值 |
empty-cells |
空单元格显示 | show, hide |
table-layout |
表格布局算法 | auto, fixed |
caption-side |
标题位置 | top, bottom |
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f5f5f5;
}
caption {
font-weight: bold;
margin-bottom: 10px;
}
</style>
<table>
<caption>东巴文课程信息</caption>
<thead>
<tr>
<th>课程名称</th>
<th>讲师</th>
<th>时长</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML基础教程</td>
<td>东巴文教研团队</td>
<td>20小时</td>
<td>免费</td>
</tr>
<tr>
<td>CSS样式设计</td>
<td>东巴文教研团队</td>
<td>25小时</td>
<td>¥99</td>
</tr>
<tr>
<td>JavaScript入门</td>
<td>东巴文教研团队</td>
<td>30小时</td>
<td>¥199</td>
</tr>
</tbody>
</table>
使用<colgroup>和<col>对列进行分组：
<table>
<caption>销售数据</caption>
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="2" style="background-color: #e0e0e0;">
<col style="background-color: #d0d0d0;">
</colgroup>
<thead>
<tr>
<th>产品</th>
<th>一月</th>
<th>二月</th>
<th>总计</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品A</td>
<td>100</td>
<td>120</td>
<td>220</td>
</tr>
<tr>
<td>产品B</td>
<td>80</td>
<td>90</td>
<td>170</td>
</tr>
</tbody>
</table>
东巴文说明：
<colgroup>：列分组容器<col>：定义列属性span：指定列数使用<thead>、<tbody>、<tfoot>对行进行分组：
<table>
<thead>
<tr>
<th>产品</th>
<th>销量</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品A</td>
<td>100</td>
</tr>
<tr>
<td>产品B</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>180</td>
</tr>
</tfoot>
</table>
东巴文说明：
<thead>：表头区域，打印时每页重复<tbody>：表格主体，可以有多个<tfoot>：表格页脚，打印时每页重复scope属性scope属性指定表头的范围：
<table>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">城市</th>
</tr>
<tr>
<th scope="row">张三</th>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<th scope="row">李四</th>
<td>30</td>
<td>上海</td>
</tr>
</table>
东巴文scope属性值：
| 属性值 | 说明 | 使用场景 |
|---|---|---|
col |
列表头 | 列标题 |
row |
行表头 | 行标题 |
colgroup |
列组表头 | 多列表头 |
rowgroup |
行组表头 | 多行表头 |
headers属性headers属性关联单元格与表头：
<table>
<tr>
<th id="name">姓名</th>
<th id="age">年龄</th>
<th id="city">城市</th>
</tr>
<tr>
<td headers="name">张三</td>
<td headers="age">25</td>
<td headers="city">北京</td>
</tr>
</table>
summary属性summary属性提供表格摘要（已废弃，推荐使用<caption>或aria-describedby）：
<table aria-describedby="table-summary">
<caption>用户信息表</caption>
...
</table>
<p id="table-summary" class="sr-only">
该表格展示了用户的姓名、年龄和所在城市信息。
</p>
<!-- ✅ 推荐：完整的表格结构 -->
<table>
<caption>课程信息</caption>
<thead>
<tr>
<th>课程</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>免费</td>
</tr>
</tbody>
</table>
<!-- ❌ 不推荐：缺少语义化标签 -->
<table>
<tr>
<td><b>课程</b></td>
<td><b>价格</b></td>
</tr>
<tr>
<td>HTML</td>
<td>免费</td>
</tr>
</table>
<!-- ✅ 推荐：表格展示数据 -->
<table>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
<tr>
<td>HTML教程</td>
<td>¥99</td>
</tr>
</table>
<!-- ❌ 不推荐：表格用于布局 -->
<table>
<tr>
<td>导航</td>
<td>内容</td>
<td>侧边栏</td>
</tr>
</table>
<!-- ✅ 推荐：添加caption -->
<table>
<caption>东巴文课程列表</caption>
...
</table>
<!-- ❌ 不推荐：无标题 -->
<table>
...
</table>
<!-- ✅ 推荐：使用scope属性 -->
<table>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
</tr>
<tr>
<th scope="row">张三</th>
<td>25</td>
</tr>
</table>
<!-- ✅ 推荐：CSS控制样式 -->
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
</style>
<!-- ❌ 不推荐：HTML属性控制样式 -->
<table border="1" cellpadding="5" cellspacing="0">
...
</table>
问题1：以下哪个标签用于定义表格标题？
A. <th>
B. <caption>
C. <title>
D. <header>
答案：B
东巴文解释：<caption>标签用于定义表格标题。<th>是表头单元格，<title>是网页标题，<header>是页眉区域。
问题2：以下哪个属性用于合并列？
A. rowspan
B. colspan
C. merge
D. combine
答案：B
东巴文解释：colspan属性用于合并列，rowspan用于合并行。HTML中没有merge和combine属性。
任务：创建一个包含以下特性的表格：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格示例 - 东巴文</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
tfoot {
background-color: #f9f9f9;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>东巴文课程安排表</caption>
<thead>
<tr>
<th rowspan="2">时间</th>
<th colspan="3">课程类别</th>
</tr>
<tr>
<th>前端</th>
<th>后端</th>
<th>数据库</th>
</tr>
</thead>
<tbody>
<tr>
<td>上午</td>
<td>HTML基础</td>
<td>Python入门</td>
<td>MySQL基础</td>
</tr>
<tr>
<td>下午</td>
<td>CSS样式</td>
<td>Django框架</td>
<td>Redis缓存</td>
</tr>
<tr>
<td>晚上</td>
<td>JavaScript</td>
<td>Flask框架</td>
<td>MongoDB</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总计：9门课程</td>
</tr>
</tfoot>
</table>
<footer>
<small>版权所有 © 2024 东巴文（db-w.cn）</small>
</footer>
</body>
</html>
东巴文（db-w.cn） - 让编程学习更有趣、更高效！