Аттестация: Структурирование данных о планетах

This translation is incomplete. Please help translate this article from English

В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.

Необходимые навыки: Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле.
Цели: Проверить знания о HTML таблицах и связанными с ними возможностями.

Отправная точка

Для того, чтобы начать аттестацию, скопируйте blank-template.html, minimal-table.css, и planets-data.txt в новую директорию на вашем компьютере.

Примечание: В качестве альтарнативы, вы можете использовать такие сайты, как  JSBin или Glitch, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <script>/<style> элементы в HTML страницу.

Краткое описание проекта

Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведенным инструкциям.

Готовая таблица должна выглядить так:

Вы можете также посмотреть на готовый вариант здесь (не смотрите на исходный код — не жульничайте!).

Последние шаги

The following steps describe what you need to do to complete the table example. All the data you'll need is contained in the planets-data.txt file. If you have trouble visualising the data, look at the live example above, or try drawing a diagram.

  1. Open your copy of 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. Добавьте предоставленную подпись к вашей таблице.
  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. Ensure all the content is placed 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.

Подсказки и советы

  • Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.
  • 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.

Аттестация

Если вы проходите аттестацию в рамках организованного курса, у вас должна быть возможность отдать вашу работу вашему учителю/ментору для оценки. Если вы учитесь самостоятельно, тогда вы можете получить руководство по оцениванию своей работы, просто спросив в обсуждение этого задания, или на #mdn IRC канале на Mozilla IRC. Сначала попробуйте упражнения — ничего не добьешься жульничеством!

В этом модуле