files/zh-cn/learn/html/tables/structuring_planet_data/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

---
title: 作业：构建行星数据
slug: Learn/HTML/Tables/Structuring_planet_data
translation_of: Learn/HTML/Tables/Structuring_planet_data
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>

<p class="summary">在我们的表格评定中，我们为你提供有关太阳系中行星的一些数据，并让你将其结构化成HTML表。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">学习本章的前提条件:</th>
   <td>在尝试这个评定之前，你应该已经把这个模块的所有文章都学习完成了。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>检测对 HTML 表格及相关功能的理解。</td>
  </tr>
 </tbody>
</table>

<h2 id="起点">起点</h2>

<p>要进行本测验，将 <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a> 和 <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> 拷贝到本地。</p>

<div class="note">
<p><strong>注意</strong>: 另外， 你可以使用 <a class="external external-icon" href="https://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 来做你的测验。你可以把 HTML, CSS 和 JavaScript 粘贴到其中一个网上编辑器里。如果你使用的网上编辑器不支持 JavaScript/CSS 文件链接到 HTML 中使用，那么也可以使用 <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> 元素将它们直接写在你的 HTML 页面里。</p>
</div>

<h2 id="项目概要">项目概要</h2>

<p>你在学校工作; 目前，你的学生正在学习太阳系的行星，然后你想为他们提供一份简单的易于追踪的数据集合，来查找有关行星的数字和情况。一张 HTML 数据表将是理想的，你需要先获得可用的数据，然后把它变成一张表格，跟着下面的步骤。</p>

<p>完成后的表格看上去应该是这样的:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>

<p>你也可以 <a class="external-icon" href="https://roy-tian.github.io/learning-area/html/tables/assessment-finished/planets-data.html">在线查看</a> (不要偷看源代码，不要作弊哦!)</p>

<ul>
</ul>

<h2 id="要完成的步骤">要完成的步骤</h2>

<p>下面的步骤描述了：为了完成这个示例的表格，你所要做的事情 。所有你需要的数据都包含在<code>planets-data.txt</code> 文件中。如果你在获得这些数据时遇到了问题，也看看上面的实例，或者尝试绘制一个图。</p>

<ol>
 <li>打开在你本地环境中的 <code>blank-template.html</code>副本，提供一个外部容器来初始化表格，一个表格 header，一个表格 body。在这个例子中，你不需要表格 footer 。</li>
 <li>为你的表格添加我们提供的标题。</li>
 <li>在表格的 header 中添加一行，用来包括所有列的标题。</li>
 <li>在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。</li>
 <li>确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。</li>
 <li>添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联，使用 rowgroups 让子标题和父标题也进行关联。</li>
 <li>为包含所有行星标题的行标题的那一列数据，添加一个黑色边框</li>
</ol>

<h2 id="要点和提示">要点和提示</h2>

<ul>
 <li>标题行的第一个单元格需要是空白的，然后宽度为 2 个单元格。</li>
 <li>行的主标题 (e.g. <em>Jovian planets</em>) 以及放置在行星名称行左侧的标题 (e.g. <em>Saturn</em>) 整理出来有点麻烦， — 你需要确保每个单元格都有正确的高度和宽度。(即横跨正确的行数和列数)</li>
 <li>将标题与其行/列相关联的一种方法比其他方法容易得多。</li>
</ul>

<h2 id="评定">评定</h2>

<p>如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行评改。 如果您是自学习的，那么您可以通过询问  <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, 或在 <a href="irc://irc.mozilla.org/mdn">#mdn</a>的IRC频道 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> 中轻松获得标记指南. 首先尝试练习 - 作弊对你没有益处！</p>

<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>