当前位置：首页 > HTML

h5 实现table

2026-03-06 12:49:10HTML

使用HTML5创建表格

在HTML5中，可以通过<table>标签及其相关子标签（如<tr>、<td>、<th>等）快速实现表格结构。以下是一个基础示例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

表格结构说明

<table>：定义表格容器
<thead>：表头区域（可选）
<tbody>：表格主体内容（可选但推荐）
<tr>：定义表格行
<th>：表头单元格（默认加粗居中）
<td>：普通数据单元格

添加样式控制

通过CSS可以增强表格的视觉效果：

h5 实现table

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial;
  }
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  tr:hover {
    background-color: #f5f5f5;
  }
</style>

响应式表格实现

针对移动端设备，可以通过媒体查询实现响应式表格：

h5 实现table

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

对应的HTML需要为<td>添加data-label属性：

<td data-label="姓名">张三</td>

表格高级特性

HTML5表格支持以下增强功能：

colspan和rowspan实现单元格合并
<caption>添加表格标题
<colgroup>和<col>定义列样式
使用scope属性提升无障碍访问

<table>
  <caption>员工信息表</caption>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col span="2" style="background-color: #e6e6e6">
  </colgroup>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">部门</th>
    <th scope="col">职位</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>技术部</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td colspan="2">2020年入职</td>
  </tr>
</table>

这些方法可以灵活组合，根据实际需求创建功能完善、样式美观的HTML5表格。

标签: table