Бесплатный курс по HTML/CSS. Зарегистрируйтесь для отслеживания прогресса →

HTML/CSS: Таблицы

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

Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов. Это похоже на то, как верстаются списки — имеется контейнер и внутри него специальные теги-элементы

Разметка содержит в себе несколько основных элементов:

  • <table> — область таблицы
    • <tr> — строка
    • <thead> — шапка таблицы
    • <th> — ячейка шапки
    • <tbody> — тело таблицы
    • <td> — ячейка

Любая таблица начинается с парного тега <table>

<table>
  <!-- Здесь будут данные таблицы -->
</table>

Именно внутри этого тега создаются строки и столбцы таблицы. Теперь можно создать строки и столбцы. Для этого используются теги <tr> и <td>. Создадим две строки и три ячейки в каждой строке:

<table>
  <tr> <!-- Строка -->
    <td>Шоколад «Тота»</td> <!-- Ячейка -->
    <td>100 грамм</td>
    <td>200 рублей</td>
  </tr>

  <tr> <!-- Строка -->
    <td>Шоколад «Тота TeamLead»</td> <!-- Ячейка -->
    <td>100 грамм</td>
    <td>500 рублей</td>
  </tr>
</table>
Шоколад «Тота» 100 грамм 200 рублей
Шоколад «Тота TeamLead» 100 грамм 500 рублей

Важно: Количество ячеек в каждой строке должно быть одинаковым


Попробуйте вставить этот код в редактор. Заметьте, что визуально вывод будет отличаться от вывода таблицы в теории этого урока. Дело в том, что, по умолчанию, браузер не проставляет видимые границы для ячеек таблицы. Для этого необходимо использовать CSS — специальный язык стилей. С этим языком и его возможностями вы встретитесь в другом курсе.

Данные выведены, но не хватает заголовков, с помощью которых можно описать каждый столбец. Для создания заголовка таблицы используется тег <thead>, а в качестве тега ячейки <th>. В остальном структура вёрстки не меняется. Дополним таблицу заголовками:

<table>
  <thead> <!-- Шапка таблицы -->
    <tr>
      <th>Вкусняшка</th> <!-- Ячейка-заголовок -->
      <th>Вес</th>
      <th>Цена</th>
    </tr>
  </thead>

  <tr>
    <td>Шоколад «Тота»</td>
    <td>100 грамм</td>
    <td>200 рублей</td>
  </tr>

  <tr>
    <td>Шоколад «Тота TeamLead»</td>
    <td>150 грамм</td>
    <td>500 рублей</td>
  </tr>
</table>
Вкусняшка Вес Цена
Шоколад «Тота» 100 грамм 200 рублей
Шоколад «Тота TeamLead» 150 грамм 500 рублей

Последним шагом станет добавление тега <tbody>, который размечает основную часть таблицы. Часто разработчики его упускают, потому что браузеры автоматически оборачивают им группу строк, которые не обёрнуты в другие теги. Обратите внимание — тег <tbody> чаще всего только один в таблице. В больших таблицах можно использовать несколько <tbody>, чтобы отделить разные секции в таблице, но в большинстве случаев в этом нет необходимости.

<table>
  <thead>
    <tr>
      <th>Вкусняшка</th>
      <th>Вес</th>
      <th>Цена</th>
    </tr>
  </thead>

  <tbody> <!-- Тело таблицы -->
    <tr>
      <td>Шоколад «Тота»</td>
      <td>100 грамм</td>
      <td>200 рублей</td>
    </tr>

    <tr>
      <td>Шоколад «Тота TeamLead»</td>
      <td>150 грамм</td>
      <td>500 рублей</td>
    </tr>
  </tbody>
</table>

Дополнительно можно указать «подвал/footer» таблицы. В нём может находиться суммарная информация, например, стоимость всех товаров.

У таблиц можно настроить заголовок. Он нужен, если одновременно выводится несколько таблиц. Это помогает отделить их друг от друга и не запутаться в том, какая таблица что доносит. Для создания заголовка таблицы используется парный тег <caption>. Если заголовок есть, то он обязательно должен располагаться сразу после тега <table>. Добавим заголовок в таблицу:

<table>
  <caption>Ассортимент шоколада «Hexlet»</caption>
  <thead>
    <tr>
      <th>Вкусняшка</th>
      <th>Вес</th>
      <th>Цена</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Шоколад «Тота»</td>
      <td>100 грамм</td>
      <td>200 рублей</td>
    </tr>

    <tr>
      <td>Шоколад «Тота TeamLead»</td>
      <td>150 грамм</td>
      <td>500 рублей</td>
    </tr>
  </tbody>
</table>
Ассортимент шоколада «Hexlet»
Вкусняшка Вес Цена
Шоколад «Тота» 100 грамм 200 рублей
Шоколад «Тота TeamLead» 150 грамм 500 рублей

Задание

Создайте таблицу из 3 строк с 2 ячейками в каждой. Первая строка содержит в себе шапку таблицы

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Количество ячеек в каждой строке таблицы должно быть одинаковым

  • Заголовок таблицы caption всегда располагается сразу после открытия таблицы

  • Браузеры автоматически добавляют тег <tbody>, если он отсутствует. В небольших таблицах его можно не указывать


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе