参考资料

1. HTML 有用的提示
2. HTML 用于短的引用
3. HTML使用表格 布局
4. HTML 表格背景
5. html表格标签详细说明以及案例
6. HTML 使用
   元素布局
7. HTML 内联 元素
8. HTML 文本格式化

HTML 表格空间

HTML 表格空间

详细介绍

HTML表格用于在网页上以行和列的形式显示数据。表格由<table>元素定义，包含行(<tr>)、表头单元格(<th>)和标准单元格(<td>)。

主要标签

• <table>: 定义表格

• <tr>: 定义表格行

• <th>: 定义表头单元格

• <td>: 定义标准单元格

• <caption>: 定义表格标题

• <thead>: 定义表头区域

• <tbody>: 定义表格主体

• <tfoot>: 定义表尾区域

基本用法

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

完整实例

<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>84</td>
      <td>88.5</td>
    </tr>
  </tfoot>
</table>

功能特性

• 数据展示

• 跨行跨列(colspan/rowspan)

• 分组显示(thead/tbody/tfoot)

• 可访问性支持

CSS扩展

/* 基本样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* 斑马纹效果 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停效果 */
tr:hover {
  background-color: #e9e9e9;
}

/* 响应式表格 */
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 10px;
  }
  table td {
    display: block;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

高级功能

• 使用colspan和rowspan合并单元格

• 使用scope属性提高可访问性

• 结合JavaScript实现排序和筛选功能