HTML tr 标签 - 绿叶网

HTML tr 语法

在 HTML 中，tr 标签用于定义表格的一行。它通常搭配 th 或 td 标签一起使用，从而定义表格的一行数据。

语法：

<!--方式1-->
<tr>
    <th>单元格1</th>
    <th>单元格2</th>
</tr>

<!--方式2-->
<tr>
    <td>单元格1</td>
    <td>单元格2</td>
</tr>

说明：

当 tr 标签与 th 标签一起使用，用于定义表头行数据。当 tr 标签与 td 标签一起使用，用于定义正文行数据。

提示: tr 是 “table row（表格行）” 的缩写。

HTML tr 摘要

属于	HTML 表格
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML tr 示例

接下来，我们通过一个简单的例子来讲解一下 HTML tr 标签是如何使用的。

示例：tr 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 使用CSS为表格加上边框 */
        table, tr, td, th { border: 1px solid silver; }
    </style>
</head>
<body>
    <table>        
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML tr标签示例

分析：

tr 的子元素可以是 th 或 td。如果是用于表示表头行，应该使用 tr 和 th 搭配实现；如果是用于表示正文行，应该使用 tr 和 td 搭配实现。