HTML for Kids · 课时

表格：整理数据

Q: 「表格：整理数据」这节课中我会学到什么？

学习如何创建用于显示信息的表格 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习如何创建用于显示信息的表格

第 1 / 4 课10 个步骤

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

表格：整理数据

欢迎来到下一课！今天，我们将学习如何在 HTML 中创建表格。表格非常适合按照行和列整理信息。

什么是表格？

表格是一种以结构化格式显示信息的方式。每个表格都由行和列组成。

表格如下所示：

Name      Age      City


Alice     12       New York


Bob       15       London

让我们使用 HTML 创建这个表格吧！

创建简单表格

HTML 中的表格使用 <table> 标签创建。行使用 <tr> 标签创建，单元格使用 <td> 标签创建。

示例：

<table>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

添加表头

您可以使用 <th> 标签为表格添加表头。表头可以让表格更易于理解。

示例：

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

为表格添加边框

默认情况下，表格没有边框。您可以使用 border 属性或 CSS 添加边框。

示例：

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

跨列和跨行

有时，您可能需要让一个单元格跨越多列或多行。请使用 colspan 或 rowspan 属性来实现。

示例：

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

设置表格样式

您可以使用 CSS 让表格外观更美观。例如，您可以更改颜色、添加内边距或对齐文本。

示例：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: lightgray;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>12</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>15</td>
    <td>London</td>
  </tr>
</table>

动手试一试

让我们创建一个列出您最喜欢的电影的表格。下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorite Movies</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>
    <table border="1">
      <tr>
        <th>Movie</th>
        <th>Year</th>
        <th>Genre</th>
      </tr>
      <tr>
        <td>Inception</td>
        <td>2010</td>
        <td>Science Fiction</td>
      </tr>
      <tr>
        <td>The Lion King</td>
        <td>1994</td>
        <td>Animation</td>
      </tr>
    </table>
  </body>
</html>

做得很好！

恭喜您！您已经学会了如何创建表格、添加表头，甚至为表格设置样式。表格是整理和显示数据的绝佳方式。在下一课中，我们将学习表单，以收集用户输入。准备好让页面变得更具互动性吧！

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 16
课程: 35

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

常见问题解答

「表格：整理数据」课时是免费的吗？

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

「表格：整理数据」这节课中我会学到什么？

学习如何创建用于显示信息的表格你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

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

「表格：整理数据」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML for Kids