---
title: 'Аттестация: Структурирование данных о планетах'
slug: Learn/HTML/Tables/Structuring_planet_data
tags:
  - HTML
  - Начинающим
  - таблицы
translation_of: Learn/HTML/Tables/Structuring_planet_data
---
<div>{{LearnSidebar}}</div>

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

<p class="summary">В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас <span class="tlid-translation translation" lang="ru"><span title="">структурировать их в </span></span>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 href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <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 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> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li>
 <li>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li>
 <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li>
 <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li>
 <li>Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li>
 <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li>
 <li>Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li>
</ol>

<h2 id="Подсказки_и_советы">Подсказки и советы</h2>

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

<h2 id="Аттестация_или_дальнейшая_помощь">Аттестация или дальнейшая помощь</h2>

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

<ol>
 <li>Разместите свою работу в онлайн-редакторе, таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle </a>или <a href="https://glitch.com/">Glitch</a>.</li>
 <li>Напишите сообщение с просьбой об оценке и/или помощи в <a href="https://discourse.mozilla.org/c/mdn/learn">разделе обучения на форуме MDN Discourse</a>. Ваш пост должен включать:
  <ul>
   <li>Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».</li>
   <li>Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.</li>
   <li>Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.</li>
   <li>Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.</li>
  </ul>
 </li>
</ol>

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

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li>
</ul>