path: root/files/ja/learn/html/tables/structuring_planet_data/index.html

---
title: '評価: 太陽系の惑星のデータを構造化する'
slug: Learn/HTML/Tables/Structuring_planet_data
tags:
  - Assessment
  - Beginner
  - CodingScripting
  - HTML
  - Learn
  - テーブル
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/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>、および <a href="https://github.com/mdn/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> 要素をインラインで配置してください。</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 href="https://mdn.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> のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。</li>
 <li>提供されたキャプションを自分のテーブルに追加します。</li>
 <li>すべての列ヘッダーを含む行をテーブルヘッダーに追加します。</li>
 <li>すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。</li>
 <li>すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。</li>
 <li>行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。</li>
 <li>すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。</li>
</ol>

<h2 id="ヒントとTIPS">ヒントとTIPS</h2>

<ul>
 <li>ヘッダー行の最初のセルは空白で、2列にまたがる必要があります。</li>
 <li>惑星名の行見出し (例: <em>土星</em>) の左側にあるグループの行見出し (例: <em>木星型惑星</em>) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。</li>
 <li>ヘッダーを行/列に関連付ける1つの方法は、他の方法よりもはるかに簡単です。</li>
</ul>

<h2 id="評価">評価</h2>

<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-planet-data-assessment/24680">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！</p>

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

<h2 id="このモジュール">このモジュール</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li>
 <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li>
 <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li>
</ul>