在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标签在构建表格时的灵活运用。在实际开发中,我们可以根据需求调整表格的结构和样式,以达到最佳展示效果。
