正文

HTML表格必备：深入了解tr行标签与th表头标签的用法与应用实例

/0 浏览量
0601

在HTML中，表格是展示数据的一种常见方式。而tr和th标签是构建表格的核心元素。本文将详细介绍这两个标签的用法，并提供一些实用的应用实例。

tr标签：表格行

tr标签用于创建表格中的一行。它本身没有结束标签，因为它是一个自闭合标签。在tr标签内部，可以包含td（单元格）标签或者其他表格元素。

基本用法

<table>
  <tr> <!-- 第一行 -->
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr> <!-- 第二行 -->
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

属性

  • align: 定义行内容的水平对齐方式。
  • valign: 定义行内容在垂直方向的对齐方式。

th标签：表头单元格

th标签用于创建表格的表头单元格。它同样是一个自闭合标签，并且具有一些独特的属性。

基本用法

<table>
  <tr>
    <th>表头，第一列</th>
    <th>表头，第二列</th>
  </tr>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
</table>

属性

  • scope: 定义th标签的引用范围，可以是col（列）、row（行）或colgroup（列组）。
  • align: 定义表头内容的水平对齐方式。
  • valign: 定义表头内容在垂直方向的对齐方式。

应用实例

简单的表格

<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>

带有合并单元格的表格

<table border="1">
  <tr>
    <th colspan="3">员工信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>手机：13800000000</td>
    <td>邮箱：zhangsan@example.com</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>手机：13900000000</td>
    <td>邮箱：lisi@example.com</td>
  </tr>
</table>

通过以上实例，我们可以看到tr和th标签在构建表格时的灵活运用。在实际开发中，我们可以根据需求调整表格的结构和样式，以达到最佳展示效果。

-- 展开阅读全文 --