表格的基本结构(table, tr, td)

表格的基本结构(table, tr, td)

HTML表格由三个基本元素构成：<table>、<tr>和<td>。它们分别代表表格容器、行和单元格，共同构建出二维数据展示结构。

table元素

<table>是表格的最外层容器，所有其他表格相关元素都必须包含在其中。这个标签可以设置多种属性来控制表格的显示方式：

<table border="1" width="80%" cellspacing="0" cellpadding="5">
  <!-- 表格内容 -->
</table>

常用属性包括：

• border：定义表格边框宽度
• width：设置表格宽度（像素或百分比）
• cellspacing：单元格之间的间距
• cellpadding：单元格内容与边框的间距
• align：表格水平对齐方式（left/center/right）

现代HTML5更推荐使用CSS来控制样式，因此这些属性逐渐被淘汰。更标准的写法是：

<table>
  <!-- 表格内容 -->
</table>

tr元素

<tr>（table row）定义表格中的一行，每个<tr>标签包含一组单元格：

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

<tr>可以包含以下子元素：

• <td>：标准单元格
• <th>：表头单元格
• 其他表格相关元素如<td>、<th>等

td元素

<td>（table data）定义表格的标准数据单元格，必须嵌套在<tr>内：

<td colspan="2" rowspan="3" align="center" valign="middle">
  单元格内容
</td>

重要属性包括：

• colspan：横向合并单元格数量
• rowspan：纵向合并单元格数量
• align：水平对齐（left/center/right）
• valign：垂直对齐（top/middle/bottom）

示例展示合并单元格：

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td colspan="2">D</td>
  </tr>
</table>

完整表格示例

结合所有元素创建一个完整表格：

<table>
  <tr>
    <th>月份</th>
    <th>收入</th>
    <th>支出</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>5000</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>5500</td>
    <td>3200</td>
  </tr>
  <tr>
    <td>三月</td>
    <td>6000</td>
    <td>3500</td>
  </tr>
</table>

表格相关辅助元素

除了基本结构外，完整的表格还包含这些元素：

thead、tbody和tfoot

用于分组表格内容：

<table>
  <thead>
    <tr><th>日期</th><th>销售额</th></tr>
  </thead>
  <tbody>
    <tr><td>1日</td><td>1200</td></tr>
    <tr><td>2日</td><td>1500</td></tr>
  </tbody>
  <tfoot>
    <tr><td>总计</td><td>2700</td></tr>
  </tfoot>
</table>

th元素

表头单元格，默认加粗居中显示：

<tr>
  <th>姓名</th>
  <th>年龄</th>
</tr>

caption元素

为表格添加标题：

<table>
  <caption>2023年销售数据</caption>
  <!-- 表格内容 -->
</table>

表格的CSS样式

现代网页开发中，表格样式主要通过CSS控制：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

响应式表格设计

针对移动设备的表格处理方案：

<div class="table-responsive">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

<style>
  .table-responsive {
    overflow-x: auto;
  }
  @media (max-width: 600px) {
    table {
      font-size: 14px;
    }
  }
</style>

表格的可访问性

确保表格对屏幕阅读器友好：

<table aria-describedby="table-desc">
  <caption id="table-desc">员工薪资表</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">职位</th>
    </tr>
  </thead>
  <!-- 表格内容 -->
</table>

复杂表格布局

实现带有分组和多层表头的复杂表格：

<table>
  <thead>
    <tr>
      <th colspan="2">基本信息</th>
      <th colspan="3">联系方式</th>
    </tr>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>电话</th>
      <th>邮箱</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>13800138000</td>
      <td>zhangsan@example.com</td>
      <td>北京市</td>
    </tr>
  </tbody>
</table>

表格与JavaScript交互

动态操作表格的示例：

<table id="dynamic-table">
  <thead>
    <tr><th>项目</th><th>值</th><th>操作</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  function addRow() {
    const tbody = document.querySelector('#dynamic-table tbody');
    const row = document.createElement('tr');
    row.innerHTML = `
      <td><input type="text"></td>
      <td><input type="number"></td>
      <td><button onclick="this.parentNode.parentNode.remove()">删除</button></td>
    `;
    tbody.appendChild(row);
  }
</script>