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实现排序和筛选功能