表格元素-th标签-表头的样式表现-前端-HTML5-书闪BookChips

67 - 表格元素 - th标签 - 表头的样式表现

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:05:07

表格元素 - th 标签 - 表头的样式表现

在 HTML5 中，表格是展示数据的重要方式之一，而 th 标签则是表格中不可或缺的一部分，它用于定义表格的表头单元格。表头单元格通常用于标识表格列或行的内容，通过合适的样式表现可以让表格更加清晰易读。本文将详细介绍 th 标签的使用以及如何对其进行样式设置。

一、th 标签基础

th 标签是 HTML 表格中的表头单元格标签，它的基本语法与普通单元格标签 td 类似，但 th 标签主要用于表示表格的标题。默认情况下，浏览器会将 th 标签内的文本加粗并居中显示，以区别于普通单元格。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>th 标签基础示例</title>
</head>
<body>
    <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>
    </table>
</body>
</html>

在上述代码中，我们创建了一个简单的表格，第一行使用 th 标签定义了表头，分别为“姓名”、“年龄”和“职业”，后续行使用 td 标签填充具体数据。在浏览器中打开该页面，你会看到表头文本加粗并居中显示。

二、th 标签的属性

1. scope 属性

scope 属性用于定义表头单元格与表格数据单元格之间的关联关系，它有两个主要取值：

col：表示表头单元格关联的是一列数据。
row：表示表头单元格关联的是一行数据。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>th 标签 scope 属性示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
            <th scope="col">职业</th>
        </tr>
        <tr>
            <th scope="row">人员 1</th>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <th scope="row">人员 2</th>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，第一行的表头使用 scope="col" 表示这些表头关联的是列数据，而后续行的第一个单元格使用 scope="row" 表示这些表头关联的是行数据。

2. colspan 和 rowspan 属性

colspan 属性用于指定表头单元格跨越的列数，rowspan 属性用于指定表头单元格跨越的行数。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>th 标签 colspan 和 rowspan 属性示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">个人信息</th>
            <th>职业</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <td>程序员</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在上述代码中，第一行的第一个 th 标签使用 colspan="2" 表示该表头单元格跨越两列。

三、th 标签的样式设置

我们可以使用 CSS 对 th 标签进行样式设置，以满足不同的设计需求。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>th 标签样式设置示例</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            background-color: #f2f2f2;
            color: #333;
            font-size: 18px;
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }
        td {
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

在这个示例中，我们使用 CSS 对 th 标签进行了样式设置，包括背景颜色、文字颜色、字体大小、内边距和边框等。通过这些样式设置，表头的视觉效果更加突出。

四、总结

属性	描述
scope	定义表头单元格与表格数据单元格之间的关联关系，取值为 `col` 或 `row`
colspan	指定表头单元格跨越的列数
rowspan	指定表头单元格跨越的行数

th 标签在 HTML 表格中起着重要的作用，通过合理使用其属性和样式设置，可以让表格的表头更加清晰、美观，提高表格数据的可读性。希望本文对你理解和使用 th 标签有所帮助。