Базовая структура таблицы (table, tr, td) [Модуль 6: Таблицы]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Таблицы в HTML — это фундаментальный инструмент для структуризации и отображения табличных данных. В этой серии заданий вы пройдете путь от создания простейшей таблицы до использования более сложных элементов для её структурирования. Вам предстоит поработать с основными тегами: `<table>` — контейнер для всей таблицы, `<tr>` — для создания строки, и `<td>` — для создания ячейки с данными. Постепенно задания будут усложняться, знакомя вас с заголовками таблиц и семантическим разделением на шапку, тело и подвал. Этот тренажер поможет закрепить на практике ключевые навыки построения понятных и хорошо структурированных таблиц.

Список тем

Создание основной структуры таблицы

id: 37833_table-basic-1

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

CSS

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #6c757d;
}

td, th {
  border: 1px solid #dee2e6;
  padding: 8px;
  text-align: left;
}

.placeholder {
  color: #6c757d;
  padding: 15px;
  text-align: center;
}

                     <input1 class="placeholder">
  <!-- Здесь будут строки и ячейки -->
</input1>

HTML

<input1 class="placeholder">
  <!-- Здесь будут строки и ячейки -->
</input1>

Чтобы объявить таблицу, используйте парный тег `<table>`. Всё содержимое таблицы, включая строки и ячейки, должно располагаться между открывающим `<table>` и закрывающим `</table>` тегами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление строки в таблицу

id: 37833_table-basic-2

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

CSS

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #6c757d;
}

tr {
  height: 50px;
  background-color: #f8f9fa;
}

.placeholder {
  color: #6c757d;
  padding: 15px;
  text-align: center;
}

                     <table>
  <input1>
    <td class="placeholder">Ячейки будут здесь</td>
  </input1>
</table>

HTML

<table>
  <input1>
    <td class="placeholder">Ячейки будут здесь</td>
  </input1>
</table>

Для создания строки внутри таблицы используется тег `<tr>` (table row). Каждая новая строка должна быть обернута в этот тег.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление ячеек в строку

id: 37833_table-basic-3

Теперь, когда у нас есть строка, её нужно наполнить ячейками. Добавьте две ячейки с данными ('Имя' и 'Возраст') в существующую строку `<tr>`.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #dee2e6;
  padding: 12px;
}

                     <table>
  <tr>
    <input1>Иван</input1>
    <input2>25</input2>
  </tr>
</table>

HTML

<table>
  <tr>
    <input1>Иван</input1>
    <input2>25</input2>
  </tr>
</table>

Ячейка с данными создается с помощью тега `<td>` (table data). Каждая ячейка должна находиться внутри тега строки `<tr>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Сборка полной таблицы

id: 37833_table-basic-4

Пришло время собрать все вместе. Создайте таблицу с двумя строками и двумя столбцами, используя все изученные теги: `<table>`, `<tr>`, `<td>`.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #dee2e6;
  padding: 12px;
  text-align: center;
}

                     <input1>
  <input2>
    <input3>Ячейка 1</input3>
    <input3>Ячейка 2</input3>
  </input2>
  <input2>
    <input3>Ячейка 3</input3>
    <input3>Ячейка 4</input3>
  </input2>
</input1>

HTML

<input1>
  <input2>
    <input3>Ячейка 1</input3>
    <input3>Ячейка 2</input3>
  </input2>
  <input2>
    <input3>Ячейка 3</input3>
    <input3>Ячейка 4</input3>
  </input2>
</input1>

Сначала создайте тег `<table>`. Внутри него создайте два тега `<tr>`. Внутри каждого `<tr>` создайте по два тега `<td>` с соответствующими данными.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Таблица с заголовками

id: 37833_table-basic-5

Часто у столбцов таблицы есть названия. Для этого используются заголовочные ячейки. Замените обычные ячейки в первой строке на заголовочные, чтобы стили применились корректно.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #dee2e6;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #e9ecef;
  font-weight: bold;
  text-align: center;
}

                     <table>
  <tr>
    <input1>Товар</input1>
    <input1>Цена</input1>
  </tr>
  <tr>
    <td>Ноутбук</td>
    <td>85000 ₽</td>
  </tr>
  <tr>
    <td>Мышь</td>
    <td>1500 ₽</td>
  </tr>
</table>

HTML

<table>
  <tr>
    <input1>Товар</input1>
    <input1>Цена</input1>
  </tr>
  <tr>
    <td>Ноутбук</td>
    <td>85000 ₽</td>
  </tr>
  <tr>
    <td>Мышь</td>
    <td>1500 ₽</td>
  </tr>
</table>

Для создания заголовочной ячейки используется тег `<th>` (table header) вместо `<td>`. Обычно он используется в первой строке таблицы для обозначения названий столбцов. Браузеры по умолчанию отображают текст в `<th>` жирным шрифтом и выравнивают по центру.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Семантические секции: a, tbody

id: 37833_table-basic-6

Для лучшей структуры и доступности таблицу можно разделить на три части: шапку, тело и подвал. Оберните строку с заголовками в тег шапки (`thead`), а строки с данными — в тег тела таблицы (`tbody`).

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #dee2e6;
  padding: 12px;
}

thead {
  background-color: #e9ecef;
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background-color: #f8f9fa;
}

                     <table>
  <input1>
    <tr>
      <th>Город</th>
      <th>Население</th>
    </tr>
  </input1>
  <input2>
    <tr>
      <td>Москва</td>
      <td>12.6 млн</td>
    </tr>
    <tr>
      <td>Санкт-Петербург</td>
      <td>5.4 млн</td>
    </tr>
  </input2>
</table>

HTML

<table>
  <input1>
    <tr>
      <th>Город</th>
      <th>Население</th>
    </tr>
  </input1>
  <input2>
    <tr>
      <td>Москва</td>
      <td>12.6 млн</td>
    </tr>
    <tr>
      <td>Санкт-Петербург</td>
      <td>5.4 млн</td>
    </tr>
  </input2>
</table>

Используйте парный тег `<thead>` для группировки заголовочного содержимого таблицы. Весь основной контент (строки с данными) сгруппируйте с помощью парного тега `<tbody>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление подвала таблицы (tfoot)

id: 37833_table-basic-7

Завершим семантическую разметку. Добавьте подвал таблицы, содержащий итоговую информацию. Для этого нужно использовать специальный тег.

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #dee2e6;
  padding: 12px;
}

thead {
  background-color: #e9ecef;
}

tfoot {
  font-weight: bold;
  background-color: #f8f9fa;
}

                     <table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Яблоки</td>
      <td>5 кг</td>
    </tr>
    <tr>
      <td>Бананы</td>
      <td>2 кг</td>
    </tr>
  </tbody>
  <input1>
    <tr>
      <td>Итого</td>
      <td>7 кг</td>
    </tr>
  </input1>
</table>

HTML

<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Яблоки</td>
      <td>5 кг</td>
    </tr>
    <tr>
      <td>Бананы</td>
      <td>2 кг</td>
    </tr>
  </tbody>
  <input1>
    <tr>
      <td>Итого</td>
      <td>7 кг</td>
    </tr>
  </input1>
</table>

Для группировки итоговых строк в таблице используется тег `<tfoot>`. Он размещается после `<thead>` и `<tbody>` (или даже до `<tbody>`, браузер всё равно отобразит его внизу).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку