Ceryn

HTML 表格

5分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

引入

HTML 表格用于展示有行和列关系的数据，例如成绩表、价格表、课程表等。

表格适合放结构化数据，不适合用来做网页整体布局。

正文

定义

定义

HTML 表格是由行和单元格组成的数据展示结构，通常使用 <table>、<tr>、<th>、<td> 等标签创建。

表格的核心是把数据按行和列整理出来，让内容更容易对比和查看。

基础语法

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
  </tr>
</table>

其中：

  • <table> 表示整个表格
  • <tr> 表示表格中的一行
  • <th> 表示表头单元格
  • <td> 表示普通数据单元格

表格行

<tr> 用于定义表格中的一行。

<tr>
  <td>第一列</td>
  <td>第二列</td>
</tr>

一个 <table> 中通常会有多个 <tr>。

表头单元格

<th> 用于表示表头内容，浏览器默认会把它显示为加粗并居中。

<tr>
  <th>商品</th>
  <th>价格</th>
</tr>

<th> 不只是样式加粗，它表示这一列或这一行的标题，有助于浏览器和辅助工具理解表格。

普通单元格

<td> 用于表示表格中的普通数据。

<tr>
  <td>苹果</td>
  <td>5 元</td>
</tr>

大部分表格内容都放在 <td> 中。

表格标题

<caption> 用于给表格添加标题，通常放在 <table> 内部最前面。

<table>
  <caption>学生成绩表</caption>
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>90</td>
  </tr>
</table>

<caption> 可以让用户快速知道这个表格在展示什么。

表格结构分组

复杂一点的表格可以使用 <thead>、<tbody>、<tfoot> 来划分结构。

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>键盘</td>
      <td>1</td>
      <td>199 元</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>1</td>
      <td>199 元</td>
    </tr>
  </tfoot>
</table>

其中：

  • <thead> 表示表格头部
  • <tbody> 表示表格主体
  • <tfoot> 表示表格底部

这些标签不会自动让表格变好看，主要作用是让结构更清楚。

合并列

colspan 用于让一个单元格横向合并多列。

<table>
  <tr>
    <th colspan="2">用户信息</th>
  </tr>
  <tr>
    <td>姓名</td>
    <td>张三</td>
  </tr>
</table>

colspan="2" 表示这个单元格占据两列。

合并行

rowspan 用于让一个单元格纵向合并多行。

<table>
  <tr>
    <th rowspan="2">前端</th>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

rowspan="2" 表示这个单元格占据两行。

简单完整例子

课程表

下面是一个简单课程表，用表格展示不同时间对应的课程。

<table>
  <caption>课程表</caption>
  <thead>
    <tr>
      <th>时间</th>
      <th>周一</th>
      <th>周二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>上午</td>
      <td>HTML</td>
      <td>CSS</td>
    </tr>
    <tr>
      <td>下午</td>
      <td>JavaScript</td>
      <td>练习</td>
    </tr>
  </tbody>
</table>

特点

  • <table> 表示整个表格
  • <tr> 表示一行
  • <th> 表示表头单元格，通常用于标题
  • <td> 表示普通数据单元格
  • <caption> 可以给表格添加标题
  • <thead>、<tbody>、<tfoot> 可以让表格结构更清楚
  • colspan 用于合并列，rowspan 用于合并行
  • 表格样式通常需要 CSS 来控制

注意事项

  • 表格适合展示数据，不适合用来做网页布局
  • 每一行中的单元格数量要尽量对应，否则表格容易显示混乱
  • 合并单元格时，要注意被合并的行或列数量
  • 表头内容优先使用 <th>，不要全部都用 <td>
  • 如果表格数据较复杂，可以加上 <caption>，让用户更快理解表格内容
  • 表格边框、间距、颜色等样式建议交给 CSS 处理

理解

可以把 HTML 表格理解为网页中的“数据表”。

如果一组内容天然适合按行和列查看，比如成绩、价格、课程、统计数据，就适合用表格。

表格的重点不是排版，而是表达数据之间的对应关系。

引出

理解表格之后，可以继续学习 HTML 表单，表单用于收集用户输入的数据。

关系图谱

反向链接