挑战:构建行星数据表

在这个挑战中,我们将为您提供我们太阳系行星的一些数据。您的任务是将其构建成一个可访问的 HTML 表格。

起始点

要开始评估,请在您的本地计算机上创建一个新目录,并将 blank-template.htmlminimal-table.cssplanets-data.txt 的本地副本。

注意:您可以在代码编辑器或在线编辑器(如 CodePenJSFiddle)中尝试解决方案。

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

项目简介

您正在一所学校工作;您的学生目前正在学习我们太阳系的行星,您想为他们提供一套易于理解的数据,以便查找行星的事实和数据。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.

您也可以 在此处查看实时示例(不要查看源代码——不要作弊!)。