HTML Academy · 课时

table、tr、td 与 th

Q: 「table、tr、td 与 th」这节课中我会学到什么？

使用行、数据单元格和表头单元格创建基础表格。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用行、数据单元格和表头单元格创建基础表格。

第 1 / 4 课13 个步骤

table、tr、td 与 th 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

HTML 表格

表格以行和列的形式显示数据。请将表格用于表格数据，而不要用于页面布局。

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

表格、行和数据单元格元素

表格的核心元素：

<table>——表格容器
<tr>——表格行
<td>——表格数据单元格
<th>——表头单元格（默认加粗并居中）

表头单元格与数据单元格的区别

请使用 <th> 表示表头单元格，因为它具有语义含义：

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

基本表格结构

一个最简但完整的表格：

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

使用 CSS 设置表格边框

浏览器默认显示无边框表格。请使用 CSS 添加边框：

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

表格不应用于页面布局

在 20 世纪 90 年代，人们曾使用表格进行页面布局。这种做法已经过时，并且会带来问题：

屏幕阅读器会将表格解读为数据，布局表格会使用户感到困惑
表格在小屏幕上不够灵活
CSS 网格布局和弹性盒布局已经满足所有布局需求
请仅将 <table> 用于实际的表格数据

响应式表格

表格在小屏幕上会溢出。请将表格包裹起来，以支持水平滚动：

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

空单元格

请有意识地处理空单元格：

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

表头和表体预览

表格应使用 <thead> 和 <tbody> 将表头行与数据行分开——下一课将详细介绍：

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

使用列元素设置列样式

使用 <colgroup> 和 <col> 将样式应用于整列：

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

使用 CSS 设置斑马纹

交替设置行的颜色可以提高可读性：

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

快速检查

表格中的数据单元格和表头单元格有什么区别？

在交互式课程中回答

回顾：表格、行、数据单元格和表头单元格

表格基础：

<table>——表格容器
<tr>——表格行
<td>——数据单元格
<th>——表头单元格（具有语义含义，默认加粗）
使用 border-collapse: collapse 实现整洁的边框
表格仅用于数据，不用于页面布局

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「table、tr、td 与 th」课时是免费的吗？

是的 — 「table、tr、td 与 th」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「table、tr、td 与 th」这节课中我会学到什么？

使用行、数据单元格和表头单元格创建基础表格。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「table、tr、td 与 th」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy