th

定义

<th> 标签用于定义表格内的表头单元格。

th 元素内部的文本通常会呈现为居中的粗体文本

属性

属性	值	描述
scope	col、colgroup、row、rowgroup	规定表头单元格是否是行、列、行组或列组的头部。
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格。
colspan	number	规定表头单元格可横跨的列数。
rowspan	number	规定表头单元格可横跨的行数。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Company</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>NTHOME</td>
            <td>1294353916@qq.com</td>
        </tr>
    </table>
</body>
</html>

Company	Email
NTHOME	1294353916@qq.com

scope属性：

规定表头单元格是否是行、列、行组或列组的头部。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th></th>
            <th scope="col">课名</th>
            <th scope="col">价格</th>
        </tr>
        <tr>
            <td>1</td>
            <td>《零基础入门学习Mide+》</td>
            <td>¥49.50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>《零基础入门学习易语言》</td>
            <td>¥60</td>
        </tr>
    </table>
</body>
</html>

	课名	价格
1	《零基础入门学习Mide+》	¥49.50
2	《零基础入门学习易语言》	¥60

headers属性：

headers属性在普通的浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th id="name" colspan="2">NTHOME教材</th>
        </tr>
        <tr>
            <th headers="name">课名</th>
            <th headers="name">价格</th>
        </tr>
    </table>
</body>
</html>

NTHOME教材
课名	价格

colspan属性：

规定表头单元格可横跨的列数。

见headers属性演示

rowspan属性：

规定表头单元格可横跨的行数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;

        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>课名</th>
            <th>价格</th>
            <th rowspan="3">NTHOME教材</th>
        </tr>
        <tr>
            <td>《零基础入门学习Mide+》</td>
            <td>¥49.50</td>
        </tr>
        <tr>
            <td>《零基础入门学习易语言》</td>
            <td>¥60</td>
        </tr>
    </table>
</body>
</html>

课名	价格	NTHOME教材
《零基础入门学习Mide+》	¥49.50
《零基础入门学习易语言》	¥60

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
1.0	1.0	1.0	1.0