起始点
要开始评估,请在您的本地计算机上创建一个新目录,并将 blank-template.html、minimal-table.css 和 planets-data.txt 的本地副本。
项目简介
您正在一所学校工作;您的学生目前正在学习我们太阳系的行星,您想为他们提供一套易于理解的数据,以便查找行星的事实和数据。HTML 数据表将是理想的选择——您需要获取可用的原始数据,并按照以下步骤将其转换为表格。
完成步骤
以下步骤描述了完成表格示例所需的操作。您需要的所有数据都包含在 planets-data.txt
文件中。如果您在可视化数据时遇到困难,请查看下面的实时示例,或尝试绘制图表。
- 打开您的
blank-template.html
副本,并通过添加外部容器、表格标题和表格主体来开始构建表格。此示例不需要表格页脚。 - 为您的表格添加提供的标题。
- 在表格标题中添加一个包含所有列标题的行。
- 在表格主体中创建所有内容行,记住要以语义化的方式将所有行标题设置为标题。
- 确保所有内容都放置在正确的单元格中——在原始数据中,每一行行星数据都显示在其关联行星的旁边。
- 添加属性,使行标题和列标题与它们作为标题的行、列或行组明确关联。
- 在包含所有行星名称行标题的列周围添加一个黑色的 边框。
提示和技巧
- 标题行中的第一个单元格应为空,并跨越两列。
- 组行标题(例如,类木行星),它们位于行星名称行标题(例如,土星)的左侧,处理起来有点棘手——您需要确保每个标题跨越正确的行数和列数。
- 一种将标题与行/列关联的方法比另一种容易得多。
示例
完成的表格应如下所示:
您也可以 在此处查看实时示例(不要查看源代码——不要作弊!)。