构建行星数据

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

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

起点

要开始评估，请在您本地计算机的新目录中创建以下文件的本地副本：blank-template.html、minimal-table.css 和 planets-data.txt。

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

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

项目简介

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

完成步骤

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

  1. 打开您复制的 blank-template.html，并通过为其提供一个外部容器、一个表格标题和一个表格主体来开始表格。在此示例中，您不需要表格脚注。
  2. 将提供的标题添加到您的表格中。
  3. 在表格标题中添加一行，其中包含所有列标题。
  4. 在表格主体内部创建所有内容行，记住将所有行标题从语义上转换为标题。
  5. 确保所有内容都放置在正确的单元格中——在原始数据中，每行行星数据都显示在其关联的行星旁边。
  6. 添加属性，使行和列标题与其充当标题的行、列或行组明确关联。
  7. 在包含所有行星名称行标题的列周围添加黑色 边框。

提示和技巧

  • 标题行的第一个单元格需要为空白，并跨越两列。
  • 位于行星名称行标题（例如，土星）左侧的组行标题（例如，类木行星）有点难以整理——您需要确保每个标题都跨越正确的行数和列数。
  • 关联标题与其行/列的一种方法比另一种方法容易得多。

示例

完成的表格应如下所示

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.

您还可以 在此处查看实时示例（不要查看源代码——不要作弊！）