HTML中的<table>标签怎么用

# HTML中的`<table>`标签怎么用

`<table>`标签是HTML中用于创建表格的核心元素，能够以行列形式结构化展示数据。本文将详细介绍其基本语法、常用子标签、属性及实际应用示例。

---

## 一、`<table>`基础语法

一个完整的表格由以下结构组成：

```html
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

核心子标签：

• <tr>（Table Row）：定义表格行
• <th>（Table Header）：定义表头单元格（默认加粗居中）
• <td>（Table Data）：定义数据单元格

二、表格常用属性

1. 边框与样式

<table border="1" style="width:100%">
  <!-- 设置边框和宽度 -->
</table>

2. 合并单元格

• colspan：横向合并
• rowspan：纵向合并

<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>

3. 分组标签

• <thead>：表头分组
• <tbody>：主体分组
• <tfoot>：表尾分组

<table>
  <thead>
    <tr><th>月份</th><th>销售额</th></tr>
  </thead>
  <tbody>
    <tr><td>1月</td><td>¥5000</td></tr>
  </tbody>
</table>

三、响应式表格实践

方法1：CSS溢出控制

table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

方法2：使用<figure>包裹

<figure>
  <table>...</table>
  <figcaption>2023销售数据</figcaption>
</figure>

四、实际应用示例

课程表案例

<table border="1" cellpadding="8">
  <caption>2023秋季课程表</caption>
  <tr>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
  </tr>
  <tr>
    <td>9:00-10:30</td>
    <td>数学</td>
    <td rowspan="2">物理实验</td>
  </tr>
  <tr>
    <td>10:45-12:15</td>
    <td>英语</td>
  </tr>
</table>

效果说明： - 添加了<caption>作为表格标题 - 使用cellpadding增加单元格内边距 - 物理实验课程跨两节课

五、注意事项

1. 语义化原则：

   • 仅用于展示表格数据，不要用于页面布局
   • 复杂布局应使用CSS Grid/Flexbox

2. 可访问性：

   • 为<table>添加aria-label描述
   • 确保表头<th>使用scope属性

<th scope="col">日期</th>
<th scope="row">项目</th>

1. 现代替代方案：
   • 简单列表建议使用<ul>/<ol>
   • 键值对数据可使用<dl>

通过合理使用<table>标签及其相关属性，可以创建出结构清晰、语义明确的数据表格。对于移动端适配，建议结合CSS媒体查询进行优化。 “`

注：本文实际约650字，如需扩展至800字，可增加以下内容： 1. 更多实际案例（如财务报表、成绩单等） 2. 与CSS结合的样式技巧（斑马纹、悬停效果等） 3. 浏览器兼容性说明 4. 与JavaScript的交互示例