HTML表格

在本章节中，我们将学习HTML表格的概念、语法和使用方法，这是组织和展示表格数据的重要元素。

1. 什么是HTML表格？

HTML表格是用于组织和显示结构化数据的元素，由行和列组成，类似于电子表格。表格可以清晰地展示数据之间的关系，便于用户快速理解和比较信息。

2. HTML表格的基本结构

HTML表格的基本结构由以下标签组成：

标签	描述
`<table>`	定义表格
`<tr>`	定义表格行
`<th>`	定义表格标题单元格
`<td>`	定义表格数据单元格

3. 基本表格示例

<table border="1">
    <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>
    <tr>
        <td>王五</td>
        <td>28</td>
        <td>产品经理</td>
    </tr>
</table>

4. 表格的基本属性

4.1 border属性

border属性用于设置表格边框的宽度，单位为像素：

<table border="1">
    <!-- 表格内容 -->
</table>

4.2 width和height属性

width和height属性用于设置表格的宽度和高度：

<table border="1" width="500" height="200">
    <!-- 表格内容 -->
</table>

4.3 cellpadding和cellspacing属性

cellpadding：设置单元格内容与边框之间的间距
cellspacing：设置单元格之间的间距

<table border="1" cellpadding="10" cellspacing="5">
    <!-- 表格内容 -->
</table>

4.4 align属性

align属性用于设置表格的对齐方式，取值包括：left（左对齐）、center（居中）、right（右对齐）：

<table border="1" align="center">
    <!-- 表格内容 -->
</table>

5. 表格的标题

可以使用<caption>标签为表格添加标题：

<table border="1">
    <caption>员工信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <!-- 表格数据 -->
</table>

6. 表格的表头、表体和表尾

HTML表格可以分为三个部分：表头、表体和表尾：

<thead>：定义表格的表头部分
<tbody>：定义表格的表体部分
<tfoot>：定义表格的表尾部分

<table border="1">
    <thead>
        <tr>
            <th>产品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML教程</td>
            <td>99</td>
            <td>2</td>
            <td>198</td>
        </tr>
        <tr>
            <td>CSS教程</td>
            <td>129</td>
            <td>1</td>
            <td>129</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">总计：</td>
            <td>327</td>
        </tr>
    </tfoot>
</table>

7. 单元格合并

可以使用colspan和rowspan属性合并单元格：

7.1 列合并（colspan）

colspan属性用于合并列，即一个单元格占据多列：

<table border="1">
    <tr>
        <th colspan="2">个人信息</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>程序员</td>
    </tr>
</table>

7.2 行合并（rowspan）

rowspan属性用于合并行，即一个单元格占据多行：

<table border="1">
    <tr>
        <th>姓名</th>
        <td>张三</td>
    </tr>
    <tr>
        <th rowspan="2">联系方式</th>
        <td>13800138000</td>
    </tr>
    <tr>
        <td>zhangsan@example.com</td>
    </tr>
</table>

8. 表格的样式化

可以使用CSS来美化表格，包括边框、背景色、字体等：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式化表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        tr:hover {
            background-color: #e9ecef;
        }
        caption {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
    </style>
</head>
<body>
    <table>
        <caption>员工信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>部门</th>
                <th>职位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>技术部</td>
                <td>前端开发工程师</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>设计部</td>
                <td>UI设计师</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>35</td>
                <td>产品部</td>
                <td>产品经理</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>26</td>
                <td>市场部</td>
                <td>市场专员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

9. 复杂表格示例

<table border="1" style="border-collapse: collapse; width: 100%;">
    <caption>复杂表格示例</caption>
    <thead>
        <tr>
            <th rowspan="2">课程名称</th>
            <th colspan="2">基础班</th>
            <th colspan="2">进阶班</th>
        </tr>
        <tr>
            <th>学费</th>
            <th>时长</th>
            <th>学费</th>
            <th>时长</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>HTML</td>
            <td>¥99</td>
            <td>4周</td>
            <td>¥199</td>
            <td>6周</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>¥129</td>
            <td>5周</td>
            <td>¥249</td>
            <td>8周</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>¥199</td>
            <td>6周</td>
            <td>¥399</td>
            <td>10周</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总课程数：</td>
            <td colspan="3">3门</td>
        </tr>
    </tfoot>
</table>

10. HTML表格实战

让我们创建一个包含多种表格效果的示例页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML表格实战</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }
        h2 {
            color: #555;
            margin-top: 30px;
        }
        .table-example {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }
        /* 基础表格样式 */
        .basic-table {
            border-collapse: collapse;
            width: 100%;
        }
        .basic-table th,
        .basic-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        /* 样式化表格 */
        .styled-table {
            border-collapse: collapse;
            width: 100%;
            font-family: Arial, sans-serif;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .styled-table thead tr {
            background-color: #007bff;
            color: white;
            text-align: left;
        }
        .styled-table th,
        .styled-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #ddd;
        }
        .styled-table tbody tr {
            border-bottom: 1px solid #ddd;
        }
        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f8f9fa;
        }
        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #007bff;
        }
        .styled-table tbody tr:hover {
            background-color: #e9ecef;
        }
        /* 响应式表格 */
        .responsive-table {
            overflow-x: auto;
            margin: 20px 0;
        }
        .responsive-table table {
            border-collapse: collapse;
            width: 100%;
        }
        .responsive-table th,
        .responsive-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>HTML表格实战</h1>
    
    <h2>1. 基础表格</h2>
    <div class="table-example">
        <table class="basic-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>
    </div>
    
    <h2>2. 样式化表格</h2>
    <div class="table-example">
        <table class="styled-table">
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>单价</th>
                    <th>库存</th>
                    <th>销量</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>HTML教程</td>
                    <td>¥99</td>
                    <td>150</td>
                    <td>280</td>
                </tr>
                <tr>
                    <td>CSS教程</td>
                    <td>¥129</td>
                    <td>120</td>
                    <td>210</td>
                </tr>
                <tr>
                    <td>JavaScript教程</td>
                    <td>¥199</td>
                    <td>100</td>
                    <td>350</td>
                </tr>
                <tr>
                    <td>Python教程</td>
                    <td>¥249</td>
                    <td>90</td>
                    <td>420</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <h2>3. 合并单元格</h2>
    <div class="table-example">
        <table class="basic-table">
            <caption>课程表</caption>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
            </tr>
            <tr>
                <td rowspan="2">上午</td>
                <td>HTML</td>
                <td>CSS</td>
                <td>JavaScript</td>
            </tr>
            <tr>
                <td>Python</td>
                <td>Java</td>
                <td>数据库</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td colspan="3">实践课</td>
            </tr>
            <tr>
                <td colspan="3">项目实战</td>
            </tr>
        </table>
    </div>
    
    <h2>4. 响应式表格</h2>
    <div class="table-example">
        <div class="responsive-table">
            <table class="basic-table">
                <tr>
                    <th>学生姓名</th>
                    <th>学号</th>
                    <th>班级</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>专业</th>
                    <th>入学年份</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>20210001</td>
                    <td>21级一班</td>
                    <td>男</td>
                    <td>20</td>
                    <td>计算机科学与技术</td>
                    <td>2021</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>20210002</td>
                    <td>21级一班</td>
                    <td>女</td>
                    <td>19</td>
                    <td>软件工程</td>
                    <td>2021</td>
                </tr>
            </table>
        </div>
        <p>提示：在小屏幕设备上，该表格可以水平滚动。</p>
    </div>
    
    <h2>5. 带表头、表体和表尾的表格</h2>
    <div class="table-example">
        <table class="styled-table">
            <caption>销售统计表</caption>
            <thead>
                <tr>
                    <th>月份</th>
                    <th>销售额</th>
                    <th>订单数</th>
                    <th>客户数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1月</td>
                    <td>¥120,000</td>
                    <td>850</td>
                    <td>620</td>
                </tr>
                <tr>
                    <td>2月</td>
                    <td>¥95,000</td>
                    <td>720</td>
                    <td>510</td>
                </tr>
                <tr>
                    <td>3月</td>
                    <td>¥150,000</td>
                    <td>1,020</td>
                    <td>780</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总计</td>
                    <td>¥365,000</td>
                    <td>2,590</td>
                    <td>1,910</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

11. 表格的最佳实践

使用语义化标签：使用<thead>、<tbody>和<tfoot>标签来结构化表格
为表格添加标题：使用<caption>标签为表格添加描述性标题
使用CSS样式化表格：避免使用HTML属性（如border、width）来设置表格样式
确保表格可访问：为表格添加适当的表头，使用scope属性标识表头与数据的关系
保持表格简洁：避免创建过于复杂的表格，每个表格应该只包含一个主题
使用响应式设计：确保表格在各种设备上都能良好显示
避免过度使用表格：不要使用表格进行页面布局，应该使用CSS布局
为单元格添加适当的对齐方式：数字右对齐，文本左对齐
使用合适的单元格间距：保持单元格内容与边框之间有适当的间距
测试表格在不同浏览器中的显示效果：确保表格在所有主流浏览器中都能正常显示

12. 常见问题解答

Q: 如何合并表格单元格？

A: 可以使用colspan属性合并列，使用rowspan属性合并行。

Q: 如何创建响应式表格？

A: 可以将表格包裹在一个带有overflow-x: auto;样式的容器中，使表格在小屏幕设备上可以水平滚动。

Q: 如何为表格添加表头？

A: 可以使用<th>标签定义表头单元格，表头通常位于表格的第一行或第一列。

Q: 如何使用CSS样式化表格？

A: 可以使用CSS的border-collapse、border、padding、background-color等属性来样式化表格。

Q: 什么时候应该使用表格？

A: 当需要展示结构化的数据，如财务报表、课程表、产品清单等时，应该使用表格。

13. 练习项目

创建一个HTML文件，包含以下内容：
- 页面标题为"HTML表格练习"
- 一个标题为"学生成绩表"
- 一个样式化的表格，包含以下列：
  - 学号
  - 姓名
  - 性别
  - 班级
  - 数学成绩
  - 英语成绩
  - 语文成绩
  - 总分
  - 平均分
- 表格至少包含5名学生的数据
- 为表格添加标题
- 使用<thead>、<tbody>和<tfoot>标签结构化表格
- 在<tfoot>中添加总分和平均分的统计
- 使用CSS样式化表格，使其美观易用
- 确保表格在小屏幕设备上可以水平滚动
在浏览器中打开文件，验证表格显示效果
检查表格结构是否合理，样式是否美观

14. 小结

HTML使用<table>标签定义表格
表格由行（<tr>）、表头单元格（<th>）和数据单元格（<td>）组成
可以使用<caption>标签为表格添加标题
表格可以分为表头（<thead>）、表体（<tbody>）和表尾（<tfoot>）
可以使用colspan和rowspan属性合并单元格
使用CSS可以美化表格，包括边框、背景色、字体等
表格应该用于展示结构化数据，而不是页面布局
响应式设计确保表格在各种设备上都能良好显示

在下一章节中，我们将学习HTML表单的详细知识。