HTML 制表

在网页设计中，表格是一种常用的布局方式，可以将数据呈现为整齐的行列形式，方便用户浏览和比较。HTML 提供了一套标签和属性，可以用来编写表格，下面介绍一些常用的 HTML 制表技巧。

基本表格结构

HTML 表格由 table、tr 和 td 等标签组成，其中 table 标签表示表格容器，tr 表示表格行，td 表示单元格。例如：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

该代码片段会生成一个包含两行三列的表格，分别填充数字和字母。

表格标题和注释

为了更好地描述表格内容，可以为表格添加标题和注释。HTML 提供了 caption 和 th 两个标签，其中 caption 表示表格标题，th 表示表格头单元格。

<table>
  <caption>基本信息表</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>女</td>
  </tr>
</table>

上述代码片段生成了一个带有标题的基本信息表。

表格合并单元格

有时为了美观或表达更清晰的含义，需要将表格的某些单元格合并成一个单元格。HTML 提供了 colspan 和 rowspan 两个属性，可以实现单元格合并。

<table>
  <tr>
    <th rowspan="2">商品</th>
    <th colspan="2">销售量</th>
  </tr>
  <tr>
    <th>2017年</th>
    <th>2018年</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>1000</td>
    <td>1200</td>
  </tr>
  <tr>
    <td>橙子</td>
    <td colspan="2">2000</td>
  </tr>
</table>

上述代码片段生成了一个带有合并单元格的表格。

表格样式和响应式设计

通过 CSS 样式，可以对表格进行美化和定制。可以为表格添加外边距、内边距、边框、背景色等样式。同时，在响应式设计中，可以通过设置百分比宽度或者媒体查询等方式，实现表格在不同设备上的自适应布局。

<style>
  table {
    margin: 20px 0;
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  th { background-color: #f0f0f0; }
  caption { font-size: 24px; font-weight: bold; }
  @media screen and (max-width: 480px) {
    th, td { font-size: 12px; }
    caption { font-size: 20px; }
  }
</style>

<table>
  <caption>响应式表格</caption>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>25</td>
    <td>13812345678</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>22</td>
    <td>13987654321</td>
  </tr>
</table>

上述代码片段演示了一个带样式和响应式设计的表格。

以上是 HTML 制表的一些技巧和示例。通过这些方法，可以编写出美观、清晰和强大的数据表格来方便用户浏览和分析数据。