Web速查-索引

定义

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

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

属性

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

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习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>FishC, Inc.</td>

            <td>fishc_service@126.com</td>

        </tr>

    </table>

</body>

</html>
Company Email
FishC, Inc. fishc_service@126.com

scope属性：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习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>《零基础入门学习Python》</td>

            <td>¥49.50</td>

        </tr>

        <tr>

            <td>2</td>

            <td>《零基础入门学习Scratch》</td>

            <td>¥60</td>

        </tr>

    </table>

</body>

</html>
书名 价格
1 《零基础入门学习Python》 ¥49.50
2 《零基础入门学习Scratch》 ¥60

headers属性：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习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">鱼C教材</th>

        </tr>

        <tr>

            <th headers="name">书名</th>

            <th headers="name">价格</th>

        </tr>

    </table>

</body>

</html>
鱼C教材
书名 价格

colspan属性：

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

见headers属性演示

rowspan属性：

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习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">鱼C教材</th>

        </tr>

        <tr>

            <td>《零基础入门学习Python》</td>

            <td>¥49.50</td>

        </tr>

        <tr>

            <td>《零基础入门学习Scratch》</td>

            <td>¥60</td>

        </tr>

    </table>

</body>

</html>
书名 价格 鱼C教材
《零基础入门学习Python》 ¥49.50
《零基础入门学习Scratch》 ¥60

视频讲解