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

* Назад
* Обзор: Tables

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

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

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

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

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

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

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

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

![](/ru/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

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

Шаги для завершения
-------------------

Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле `planets-data.txt`. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.

1. Откройте вашу копию `blank-template.html` , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
2. Добавьте предоставленную подпись к вашей таблице ("Caption" в конце `planets-data.txt`).
3. Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
4. Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть *семантически*.
5. Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
6. Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
7. Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
Подсказки и советы
------------------

* Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.
* Заголовки групповых строк (например, *Jovian planets*), которые расположены слева от заголовков строк с именами планет (например, *Saturn*), немного сложно разобрать - необходимо убедиться, что каждый из них охватывает правильное количество строк и столбцов.
* Один из способов связать заголовки с их строками / столбцами намного проще, чем другой.
Аттестация или дальнейшая помощь
--------------------------------

Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:

1. Разместите свою работу в онлайн-редакторе, таком как CodePen, jsFiddle или Glitch.
2. Напишите сообщение с просьбой об оценке и/или помощи в разделе обучения на форуме MDN Discourse. Ваш пост должен включать:
    * Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
    * Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
    * Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
    * Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
* Назад
* Обзор: Tables