构建行星数据

在我们的表格评估中，我们为你提供了一些有关太阳系行星的数据，并让你将其构建为 HTML 表格。

¥In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.

先决条件： 在尝试进行此评估之前，你应该已经阅读了本模块中的所有文章。
目标： 测试对 HTML 表格和相关功能的理解。

初始点

¥Starting point

要开始评估，请在本地计算机的新目录中制作 blank-template.html、minimal-table.css 和 planets-data.txt 的本地副本。

¥To start the assessment, make local copies of blank-template.html, minimal-table.css, and planets-data.txt in a new directory in your local computer.

注意：你可以在代码编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

¥Note: You can try solutions in your code editor or in an online editor such as CodePen, JSFiddle, or Glitch.

如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。

¥If you get stuck, you can reach out to us in one of our communication channels.

工程概要

¥Project brief

你在学校工作；目前，你的学生正在研究太阳系的行星，你希望为他们提供一组易于理解的数据，以查找有关行星的事实和数据。HTML 数据表是理想的选择 - 你需要按照以下步骤获取可用的原始数据并将其转换为表格。

¥You are working at a school; currently your students are studying the planets of our solar system, and you want to provide them with an easy-to-follow set of data to look up facts and figures about the planets. An HTML data table would be ideal — you need to take the raw data you have available and turn it into a table, following the steps below.

完成步骤

¥Steps to complete

以下步骤描述了完成表示例所需执行的操作。你需要的所有数据都包含在 planets-data.txt 文件中。如果你在可视化数据时遇到困难，请查看下面的实时示例，或尝试绘制图表。

¥The following steps describe what you need to do to complete the table example. All the data you'll need is contained in the planets-data.txt file. If you have trouble visualizing the data, look at the live example below, or try drawing a diagram.

  1. 打开 blank-template.html 的副本，并通过为其提供外部容器、表头和表体来启动表。此示例不需要表页脚。
  2. 将提供的标题添加到你的表格中。
  3. 向包含所有列标题的表标题添加一行。
  4. 在表体内创建所有内容行，记住将所有行标题按语义设置为标题。
  5. 确保所有内容都放置在正确的单元格中 - 在原始数据中，每行行星数据都显示在其相关行星旁边。
  6. 添加属性以使行标题和列标题与它们充当标题的行、列或行组明确关联。
  7. 在包含所有行星名称行标题的列周围添加黑色 border。

提示和技巧

¥Hints and tips

  • 标题行的第一个单元格必须为空，并且跨越两列。
  • 位于行星名称行标题（例如土星）左侧的组行标题（例如木星行星）排序起来有点棘手 - 你需要确保每个标题跨越正确的行数和列数。
  • 将标题与其行/列相关联的一种方法比另一种方法容易得多。

示例

¥Example

完成的表格应如下所示：

¥The finished table should look like this:

Complex table has a caption above it. The top row cells are column headers. There are three columns of headers. The first two columns have merged cells, with the third column being individual headers for each row. All the text is centered. The headers and every other row have a slight background color.

你也可以 请参阅此处的示例（不看源代码 - 不要作弊！）

¥You can also see the example live here (no looking at the source code — don't cheat!)