<tr> 、 <th> 和 <td> ：行、标题和单元格

在网页设计中，表格是展示数据的重要工具。HTML提供了强大的结构化元素来构建表格，其中 <tr>、<th> 和 <td> 是构建表格的关键元素。

<tr>：表格行

<tr> 标签用于定义表格的一行。每一行通常包含一个或多个单元格（<td> 或 <th>），它们共同展示了表格的数据。

示例代码：

<table>
  <tr>
    <td>Apple</td>
    <td>5</td>
    <td>$2.99</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>3</td>
    <td>$1.49</td>
  </tr>
</table>

在这个例子中，我们创建了一个简单的商品列表表格，每一行分别包含了商品名称、数量和价格。

<th>：表格标题

<th> 标签用于定义表格中的标题行，即表头。它与 <tr> 结合使用，用于描述表格列的含义。

示例代码：

<table>
  <tr>
    <th>商品名称</th>
    <th>数量</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>5</td>
    <td>$2.99</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>3</td>
    <td>$1.49</td>
  </tr>
</table>

通过使用 <th>，我们可以清晰地标识出表格每一列的内容，使数据的阅读更加直观。

<td>：表格单元格

<td> 标签用于定义表格中的单个单元格，这些单元格可以包含文本、链接、图像等任何内容。

示例代码：

<table>
  <tr>
    <th>商品名称</th>
    <th>数量</th>
    <th>价格</th>
  </tr>
  <tr>
    <td><a href="apple.html">Apple</a></td>
    <td>5</td>
    <td>$2.99</td>
  </tr>
  <tr>
    <td><img src="banana.jpg" alt="Banana"> Banana</td>
    <td>3</td>
    <td>$1.49</td>
  </tr>
</table>

在这个例子中，我们添加了超链接和图片到单元格中，使得表格的内容更加丰富。

结论

通过合理使用 <tr>、<th> 和 <td> 标签，可以构建结构清晰、易于维护的表格。这不仅有助于提高网页的可读性，还便于搜索引擎抓取和辅助技术访问，从而提升用户体验。在实际开发中，合理规划表格结构，可以有效地组织和展示信息，满足各种应用场景的需求。