简介表格html代码

admin 2026年02月01日 23:05 104 0

HTML表格由`标签构建，核心结构包含（行）、（表头单元格）、（普通单元格），常用属性如border设置边框，cellpadding调整单元格内边距，cellspacing控制单元格间距，表格常用于展示结构化数据（如成绩单、课程表），通过嵌套与`实现复杂布局，需注意语义化使用，避免滥用表格进行页面布局，确保数据展示清晰有序。

HTML表格基础入门：从零开始掌握表格代码

在网页开发中，表格（Table）是展示结构化数据的重要工具，无论是课程表、成绩单、产品清单还是财务报表，表格都能帮助我们以整齐规范的方式呈现信息，HTML提供了专门的标签来创建表格，通过简洁的代码就能实现专业级的数据展示效果，本文将带你从零开始，系统学习HTML表格的基础知识，包括核心标签、常用属性、实用技巧以及最佳实践。

HTML表格的基本结构

HTML表格由一系列嵌套的标签组成，就像搭建一座建筑的"骨架",理解这些基本标签是掌握表格开发的第一步。

`<table>`：表格容器

<table>是表格的根标签，所有表格内容都必须包裹在<table>和</table>之间，它就像一个"表格容器",定义了表格的整体范围和边界。

<table>
  <!-- 这里放置表格的所有内容 -->
</table>

`<tr>`：表格行

<tr>（Table Row）用于创建表格中的一行，一个完整的表格可以包含多个<tr>标签，每个<tr>代表表格中的一行数据。

<table>
  <tr> <!-- 第一行 -->
    <!-- 行内的单元格内容 -->
  </tr>
  <tr> <!-- 第二行 -->
    <!-- 行内的单元格内容 -->
  </tr>
</table>

`<td>`：普通数据单元格

<td>（Table Data）是<tr>内的子标签，用于定义行中的普通数据单元格，每个<tr>可以包含多个<td>,单元格的数量决定了表格的列数。

<table>
  <tr>
    <td>单元格1</td> <!-- 第一行第一列 -->
    <td>单元格2</td> <!-- 第一行第二列 -->
  </tr>
  <tr>
    <td>单元格3</td> <!-- 第二行第一列 -->
    <td>单元格4</td> <!-- 第二行第二列 -->
  </tr>
</table>

`<th>`：表头单元格

<th>（Table Header）同样是<tr>内的子标签，专门用于定义表头单元格（如"姓名"、"年龄"、"成绩"等列标题），与<td>不同的是，<th>中的文本默认会加粗并居中显示,能够更好地突出表头的作用。

<table>
  <tr>
    <th>姓名</th> <!-- 表头：姓名 -->
    <th>年龄</th> <!-- 表头：年龄 -->
  </tr>
  <tr>
    <td>张三</td> <!-- 数据：张三 -->
    <td>20</td>  <!-- 数据：20 -->
  </tr>
</table>

表格常用属性：控制样式与结构

虽然现代Web开发更推荐使用CSS来控制表格样式，但了解HTML表格的基础属性仍然很重要,它们能帮助我们快速实现基本的表格效果。

`<table>`属性：整体控制

border：设置表格边框宽度（单位：像素）。border="1"表示显示1像素边框，不设置时默认无边框（但浏览器可能会默认添加细边框）。

<table border="1">
  <!-- 表格内容 -->
</table>

cellspacing：设置单元格之间的间距（单位：像素），默认为2像素,设置为0可以让单元格紧密排列。

<table border="1" cellspacing="0"> <!-- 单元格间距为0 -->
</table>

cellpadding：设置单元格内容与单元格边框的内边距（单位：像素），默认为1像素,较大的值能让内容与边框有更多空间。

<table border="1" cellpadding="10"> <!-- 内容与边距10像素 -->
</table>

width和height：设置表格的宽度和高度（单位：像素或百分比）,使用百分比可以让表格自适应父容器大小。

<table border="1" width="100%" height="200">
</table>

`<td>`和`<th>`属性：单元格控制

colspan：跨列属性，值表示当前单元格横跨多少列，例如colspan="2"表示当前单元格横跨2列。
rowspan：跨行属性，值表示当前单元格纵跨多少行，例如rowspan="2"表示当前单元格纵跨2行。

示例：跨行与跨列的实际应用

<table border="1">
  <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td> <!-- 纵跨2行，合并下方单元格 -->
    <td>数学</td>
    <td>90</td>
  </tr>
  <tr>
    <td>英语</td>
    <td>85</td>
  </tr>
  <tr>
    <td colspan="2">总分</td> <!-- 横跨2列，合并右侧单元格 -->
    <td>175</td>
  </tr>
</table>

显示效果： | 姓名 | 科目 | 成绩 | |------|------|------| | 张三 | 数学 | 90 | | | 英语 | 85 | | 总分 | | 175 |

表格的语义化结构：`<thead>`、`<tbody>`和`<tfoot>`

为了增强表格的可读性、可访问性和SEO（搜索引擎优化）效果，HTML提供了语义化标签，将表格清晰地划分为"表头"、"表体"和"表尾"三部分：

<thead>（Table Head）：定义表格的头部区域，通常包含列标题，一个表格最多只能有一个<thead>。
<tbody>（Table Body）：定义表格的主体区域，包含主要数据，一个表格可以有多个<tbody>（例如按月份或部门分组数据）。
<tfoot>（Table Foot）：定义表格的底部区域，通常包含汇总信息（如"总计"、"平均分"等），一个表格最多只能有一个<tfoot>。

示例：完整的语义化表格

<table border="1">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5元/斤</td>
      <td>2斤</td>
      <td>10元</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3元/斤</td>
      <td>3斤</td>
      <td>9元</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>4元/斤</td>
      <td>1斤</td>
      <td>4元</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计</td>
      <td>23元</td>
    </tr>
  </tfoot>
</table>