当前位置：首页 > 前端开发 > 正文

html中表格如何创建

admin
前端开发
2025-08-14
1

使用 ` 标签创建表格，内部用 定义行， 或 ` 定义单元格

表格的基础结构

HTML表格由一系列嵌套标签构成,核心包括 <table>、<tr>、<td> 和 <th>，它们的分工如下：

<table>：定义表格的根容器，所有表格内容必须包裹在此标签内。
<tr>：表示表格的一行（Table Row），每行可包含多个单元格。
<td>：定义普通数据单元格（Table Data Cell），用于存放常规数据。
<th>：定义表头单元格（Table Header Cell），通常加粗并居中显示，标识列的名称。

示例代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>设计师</td>
  </tr>
</table>

上述代码生成了一个3行×3列的简单表格，第一行为表头，后两行为数据行，浏览器默认会为表头添加粗体效果，并通过左右边距区分数据与表头。

关键标签详解

`<th>` vs `<td>` 的差异

特性	`<th>`	`<td>`
文本对齐方式	默认居中	默认左对齐
字体加粗	是	否
语义化意义	强调该列的重要性	仅表示普通数据
屏幕阅读器优先级	更高（视为标题）	较低（视为正文内容）

多级表头实现

复杂表格常需多级表头,可通过嵌套 <tr> 和 <th> 实现：

<table>
  <tr>
    <th colspan="2">学生信息</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
  </tr>
  <tr>
    <td>001</td>
    <td>王五</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

此处使用了 colspan 属性（后续详述），将首行的两个 <th> 分别跨两列，形成二级表头结构。

核心属性配置

控制单元格跨度的属性

colspan：指定单元格横向跨越的列数。<th colspan="2">总分</th> 会使该单元格占据两列宽度。
rowspan：指定单元格纵向跨越的行数，适用于合并多行的特殊情况。

边框与间距控制

border：直接设置表格边框粗细（单位像素），若未设置，浏览器默认无边框。
cellpadding：定义单元格内边距（内容与边框的距离）。
cellspacing：定义单元格之间的间距（边框之间的距离）。

其他实用属性

width：设置表格总宽度（可用百分比或固定值）。
align：控制表格的水平对齐方式（left/center/right）。
valign：控制单元格内容的垂直对齐方式（top/middle/bottom）。

综合示例：

<table border="1" cellpadding="5" cellspacing="0" width="80%">
  <tr>
    <th rowspan="2">类别</th>
    <th colspan="2">第一季度</th>
    <th colspan="2">第二季度</th>
  </tr>
  <tr>
    <th>一月</th>
    <th>二月</th>
    <th>四月</th>
    <th>五月</th>
  </tr>
  <tr>
    <td>电子产品</td>
    <td>100</td>
    <td>120</td>
    <td>150</td>
    <td>180</td>
  </tr>
</table>

此例中：

外层 <th> 通过 rowspan="2" 跨两行；
内层 <th> 通过 colspan="2" 跨两列；
整体宽度设为视窗的80%，边框为1px，内边距5px，单元格间距0。

CSS样式增强

纯HTML制作的表格样式有限,结合CSS可实现更精美的视觉效果，以下是常用样式方案：

基础样式重置

table {
  border-collapse: collapse; / 合并相邻边框 /
  width: 100%;              / 自适应容器宽度 /
  margin: 20px auto;        / 居中显示 /
}
th, td {
  border: 1px solid #ddd;   / 统一边框 /
  padding: 12px;           / 内边距 /
  text-align: left;        / 文本左对齐 /
}
th {
  background-color: #f2f2f2; / 表头背景色 /
  font-weight: bold;       / 加粗字体 /
}

border-collapse: collapse;：关键属性，使相邻单元格共享同一边框，避免双线问题。
background-color：为表头添加浅灰色背景，提升可读性。

斑马纹交替行色

tr:nth-child(even) {
  background-color: #f9f9f9; / 偶数行浅灰背景 /
}
tr:hover {
  background-color: #e6f7ff; / 鼠标悬停高亮 /
}

通过伪类选择器实现隔行变色,增强可读性；:hover 伪类则为交互提供反馈。

圆角与阴影特效

table {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); / 柔和阴影 /
  border-radius: 8px; / 配合overflow:hidden实现圆角 /
}
tbody {
  border-radius: 8px; / 确保内容区域也有圆角 /
}

注意：直接对 <table> 设置 border-radius 无效，需配合 overflow: hidden 或对 tbody 生效。

响应式设计适配

在移动设备上,固定宽度的表格可能出现溢出问题，解决方案如下：

水平滚动条方案

@media screen and (max-width: 600px) {
  table {
    width: 100%;
    overflow-x: auto; / 超出部分显示滚动条 /
    display: block;   / 确保滚动条正常工作 /
  }
}

当屏幕宽度小于600px时,表格变为可横向滚动，避免内容截断。

堆叠式布局（Bootstrap风格）

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  tr {
    margin-bottom: 15px; / 行间距 /
    border-bottom: 2px solid #ddd; / 分隔线 /
  }
  th {
    display: none; / 隐藏表头 /
  }
  td::before {
    content: attr(data-label); / 用自定义属性替代表头 /
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}

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

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

这种方式将表格转换为卡片式布局,更适合小屏幕阅读。

完整实战案例

以下是一个包含多种特性的综合表格示例：

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 90%;
  margin: 30px auto;
  font-family: Arial, sans-serif;
}
caption {
  font-size: 1.5em;
  margin-bottom: 15px;
}
th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}
th {
  background-color: #4CAF50;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #e6ffe6;
}
.highlight {
  background-color: #ffeb3b !important; / 覆盖原有背景色 /
}
</style>
</head>
<body>
<table>
  <caption>2025年销售业绩统计表</caption>
  <tr>
    <th>季度</th>
    <th>产品A销量</th>
    <th>产品B销量</th>
    <th>总销售额</th>
    <th>增长率</th>
  </tr>
  <tr class="highlight">
    <td>Q1</td>
    <td>1200</td>
    <td>850</td>
    <td>¥245,000</td>
    <td>↑12%</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>1500</td>
    <td>950</td>
    <td>¥285,000</td>
    <td>↑16%</td>
  </tr>
  <tr>
    <td>Q3</td>
    <td>1800</td>
    <td>1100</td>
    <td>¥330,000</td>
    <td>↑15%</td>
  </tr>
  <tr>
    <td>Q4</td>
    <td>2200</td>
    <td>1300</td>
    <td>¥385,000</td>
    <td>↑20%</td>
  </tr>
</table>
</body>
</html>

该案例包含：字幕（<caption>）；