程序员教程

HTML 表格

在网页中展示数据时，表格是一种常见且有用的工具。本教程将介绍如何使用HTML创建和管理表格。

创建一个简单的表格

要创建一个表格，我们使用 <table> 标签。表格由表头（<thead>）、表身（<tbody>）和表尾（<tfoot>）组成。表格的每一行使用 <tr> 标签表示，而单元格使用 <td> （表格数据）或 <th> （表头单元格）标签表示。以下是一个简单的表格示例：

                <table>
                <thead>
                    <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职业</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>张三</td>
                    <td>30</td>
                    <td>教师</td>
                    </tr>
                    <tr>
                    <td>李四</td>
                    <td>25</td>
                    <td>设计师</td>
                    </tr>
                </tbody>
                </table>
                

此代码段会创建一个包含两行数据的表格，其表头为“姓名”、“年龄”和“职业”。

合并单元格

有时候，我们需要合并单元格以更好地展示数据。水平合并（跨列）使用 "colspan" 属性，垂直合并（跨行）使用 "rowspan" 属性。以下是一个示例：

                <table>
                <thead>
                    <tr>
                    <th>姓名</th>
                    <th colspan="2">成绩</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>张三</td>
                    <td>语文：90</td>
                    <td>数学：95</td>
                    </tr>
                    <tr>
                    <td>李四</td>
                    <td rowspan="2">总分：190</td>
                    </tr>
                    <tr>
                    <td>王五</td>
                    </tr>
                </tbody>
                </table>
                

在此示例中，表头的“成绩”单元格跨两列，而李四的总分单元格跨两行。

设置表格样式

通过内联样式或外部CSS文件，我们可以设置表格的样式以提高可读性。以下是一个简单的内联样式示例：

                <table style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr>
                    <th style="border: 1px solid black; padding: 5px;">姓名</th>
                    <th style="border: 1px solid black; padding: 5px;">年龄</th>
                    <th style="border: 1px solid black; padding: 5px;">职业</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td style="border: 1px solid black; padding: 5px;">张三</td>
                    <td style="border: 1px solid black; padding: 5px;">30</td>
                    <td style="border: 1px solid black; padding: 5px;">教师</td>
                    </tr>
                    <tr>
                    <td style="border: 1px solid black; padding: 5px;">李四</td>
                    <td style="border: 1px solid black; padding: 5px;">25</td>
                    <td style="border: 1px solid black; padding: 5px;">设计师</td>
                    </tr>
                </tbody>
                </table>
                

在上述示例中，我们设置了表格的宽度、边框样式和单元格间距。

总结

本教程向您介绍了如何使用HTML创建和管理表格。通过合并单元格和添加样式，您可以根据需要更灵活地展示数据。