<td> ：表格数据单元格

在网页设计和开发中，表格是展示数据的一种常见方式。HTML（HyperText Markup Language）提供了丰富的元素来构建结构化的网页内容，其中 <table> 元素用于创建表格，而 <td>（Table Data Cell）元素则是表格的核心组成部分，用于定义表格中的单个单元格。

<td> 的基本用法

在 <table> 标签内使用 <td> 标签可以创建表格的列，每个 <td> 标签代表一个单元格，可以包含文本、图片或其他 HTML 内容。例如：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

这段代码将创建一个简单的 2 行 2 列的表格，每列的内容分别是第一行第一列、第一行第二列、第二行第一列和第二行第二列。

colspan 和 rowspan 属性

<td> 标签还可以通过 colspan 和 rowspan 属性实现跨列或跨行显示内容。这些属性允许一个单元格覆盖多个相邻的单元格，这对于创建复杂布局的表格非常有用。

示例：使用 colspan

假设我们需要在表格中创建一个合并了两列的单元格，可以这样做：

<table>
  <tr>
    <td colspan="2">跨两列的单元格</td>
  </tr>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

在这个例子中，colspan="2" 指定这个单元格将占据原来的两列空间。

示例：使用 rowspan

同样地，rowspan 可以让单元格跨越多行：

<table>
  <tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>第一行第一列</td>
  </tr>
  <tr>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

这里，rowspan="2" 指定该单元格将占据原来的两行空间。

结合使用 colspan 和 rowspan

同时使用 colspan 和 rowspan 可以创建更复杂的布局。例如，下面的代码展示了如何在一个表格中创建一个覆盖两行两列的单元格：

<table>
  <tr>
    <td colspan="2" rowspan="2">跨两行两列的单元格</td>
    <td>第一行第一列</td>
  </tr>
  <tr>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

在这个例子中，单元格覆盖了整个表格的前两行的前两列。

总结

<td> 是构建表格的基础元素，通过它我们可以创建、格式化和控制表格的布局。利用 colspan 和 rowspan 属性，我们能够实现更为灵活和复杂的布局设计，满足不同场景下的展示需求。无论是简单的数据表还是需要特殊布局的表格，<td> 都是不可或缺的一部分。