表格布局：在 HTML 中创建简单的表格

表格是网页设计中常用的元素之一，用于展示和组织数据。在 HTML 中创建简单的表格可以帮助您以清晰和结构化的方式呈现信息。本文将介绍如何使用 HTML 创建简单的表格布局。

使用<table>元素：在 HTML 中，可以使用<table>元素创建表格。该元素定义了一个表格的开始和结束。在<table>元素内部，可以使用<tr>元素定义表格的行，使用<td>元素定义每个单元格。例如：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

行和单元格：在<table>元素中，每个<tr>元素定义了一个表格的行。在每个<tr>元素内部，使用<td>元素定义每个单元格的内容。每个<td>元素表示一个单元格，并按顺序排列。例如，上述代码将创建一个2行2列的表格。
表头：表格通常包含一个表头，用于标识每列的标题。使用<th>元素来定义表头单元格。与<td>元素类似，<th>元素也用于创建单元格，但其内容会以粗体显示。例如：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

表格边框和样式：通过使用CSS，您可以对表格进行样式化。可以为表格添加边框、背景色、边距等。使用CSS的border属性可以设置表格边框的样式和大小。例如：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

合并单元格：在表格中，有时需要合并相邻的单元格以创建更复杂的布局。可以使用rowspan属性合并行单元格，或使用colspan属性合并列单元格。例如：

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系信息</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>电话：123456789</td>
  </tr>
  <tr>
    <td>邮箱：zhangsan@example.com</td>
  </tr>
</table>

通过以上方法，您可以在 HTML 中创建简单的表格布局。使用<table>、<tr>和<td>元素定义表格的结构，使用<th>元素定义表头，通过CSS设置表格样式，以及使用rowspan和colspan属性合并单元格。通过灵活使用这些技术，您可以根据需求创建各种表格布局来展示数据和信息。