この翻訳は不完全です。英語から この記事を翻訳 してください。

HTMLのtableの復習として、太陽系の惑星に関するいくつかのデータを提供するので、HTMLの表として構造化してもらいます。

前提知識: この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。
学習目標: HTMLの表やそれに付随する機能に関する理解を確認する。

はじめに

この評価を始める前に、次のファイルのコピーを、コンピュータの新しいディレクトリ、すなわちローカルに作成しておいてください。 blank-template.html, minimal-table.css, and planets-data.txt

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <script>/<style> elements inside the HTML page.

やることの概要

You are working at a school; currently your students are studying the planets of our solar system, and you want to provide them with an easy-to-follow set of data to look up facts and figures about the planets. An HTML data table would be ideal — you need to take the raw data you have available and turn it into a table, following the steps below.

完成した表は次のような外観を備えているはずです:

You can also see the example live here (no looking at the source code — don't cheat!)

手順

以下の手順はあなたがすべきことを説明したものです。必要なデータはすべて planets-data.txt というファイルに入っています。このデータをうまく視覚化できない場合は、 上にある例を見たり、ダイアグラムを書いたりしてみてください。

  1.  blank-template.html, and start the table off by giving it an outer container, a table header, and a table body. You don't need a table footer for this example.
  2. Add the provided caption to your table.
  3. Add a row to the table header containing all the column headers.
  4. Create all the content rows inside the table body, remembering to make all the row headings into headings semantically.
  5. Make sure all the content is inserted into the right cells — in the raw data, each row of planet data is shown next to its associated planet.
  6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for.
  7. Add a black border just around the column that contains all the planet name row headers.

ヒントとTIPS

  • The first cell of the header row needs to be blank, and span two columns.
  • The group row headings (e.g. Jovian planets) that sit to the left of the planet name row headings (e.g. Saturn) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns.
  • One way of associating headers with their rows/columns is a lot easier than the other way.

評価

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

 

このモジュールにおいて

 

ドキュメントのタグと貢献者

 このページの貢献者: karaage-kun
 最終更新者: karaage-kun,