Группировка ячеек (thead, tbody, tfoot)

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

Опубликовано 04.04.2025
Просмотры 22
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этом наборе заданий мы сосредоточимся на структурной организации таблиц. Таблицы в HTML — это не просто сетка ячеек, а хорошо организованная структура данных. Для улучшения их семантической разметки и управления отображением используются специальные теги-контейнеры: `<thead>` для заголовка, `<tbody>` для основного содержимого и `<tfoot>` для итоговой информации. Эти элементы позволяют браузеру и разработчикам четко разделять части таблицы, что особенно полезно при стилизации через CSS и при печати больших таблиц, где заголовок и "подвал" могут повторяться на каждой странице. Выполняя эти упражнения, вы научитесь правильно группировать строки таблицы, делая ваш код более читаемым, доступным и профессиональным.
Список тем

Создание тела таблицы

id: 37836_table-grouping-1

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

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

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

tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
HTML
<table>
  <tr>
    <th>Товар</th>
    <th>Цена</th>
  </tr>
  <input1>
    <tr>
      <td>Ноутбук</td>
      <td>85000 ₽</td>
    </tr>
    <tr>
      <td>Мышь</td>
      <td>1500 ₽</td>
    </tr>
    <tr>
      <td>Клавиатура</td>
      <td>3000 ₽</td>
    </tr>
  </input1>
</table>
Чтобы сгруппировать основные строки таблицы, используйте тег `<tbody>`. Открывающий тег `<tbody>` нужно поставить перед первой строкой (`<tr>`) с данными, а закрывающий `</tbody>` — после последней.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление заголовка таблицы

id: 37836_table-grouping-2

Теперь, когда у нас есть тело таблицы, давайте семантически выделим заголовок. Оберните строку с названиями столбцов ('Товар', 'Количество') в специальный тег для заголовка таблицы.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

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

thead {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}
HTML
<table>
  <input1>
    <tr>
      <th>Товар</th>
      <th>Количество</th>
    </tr>
  </input1>
  <tbody>
    <tr>
      <td>Яблоки</td>
      <td>10 кг</td>
    </tr>
    <tr>
      <td>Бананы</td>
      <td>5 кг</td>
    </tr>
  </tbody>
</table>
Для определения заголовочной части таблицы используется тег `<thead>`. Разместите его вокруг строки `<tr>`, содержащей ячейки `<th>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание подвала таблицы

id: 37836_table-grouping-3

Остался последний структурный элемент — подвал или итоговая секция таблицы. Оберните строку с итоговой суммой в соответствующий тег.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

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

thead {
  background-color: #333;
  color: white;
}

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}
HTML
<table>
  <thead>
    <tr>
      <th>Услуга</th>
      <th>Стоимость</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Стрижка</td>
      <td>1200 ₽</td>
    </tr>
    <tr>
      <td>Укладка</td>
      <td>800 ₽</td>
    </tr>
  </tbody>
  <input1>
    <tr>
      <td>Итого</td>
      <td>2000 ₽</td>
    </tr>
  </input1>
</table>
Для создания итоговой секции (подвала) таблицы используется тег `<tfoot>`. Он должен оборачивать строки, содержащие итоговые данные.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная структура таблицы

id: 37836_table-grouping-4

Давайте соберём полную и семантически верную структуру таблицы. Расставьте теги для заголовка, тела и подвала таблицы в правильных местах.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

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

thead {
  background-color: #007bff;
  color: white;
}

tfoot {
  background-color: #f8f9fa;
  font-style: italic;
}

tbody tr:hover {
  background-color: #e9ecef;
}
HTML
<table>
  <input1>
    <tr>
      <th>Имя</th>
      <th>Должность</th>
    </tr>
  </input1>
  <input2>
    <tr>
      <td>Анна</td>
      <td>Дизайнер</td>
    </tr>
    <tr>
      <td>Петр</td>
      <td>Разработчик</td>
    </tr>
  </input2>
  <input3>
    <tr>
      <td colspan="2">Всего сотрудников: 2</td>
    </tr>
  </input3>
</table>
Вам нужно использовать все три тега: `<thead>` для строки с заголовками, `<tbody>` для строк с данными о сотрудниках, и `<tfoot>` для строки с общим количеством.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Порядок tfoot в коде

id: 37836_table-grouping-5

Интересный факт: в HTML-коде `<tfoot>` может быть объявлен до `<tbody>`. Браузер все равно отобразит его внизу. Это полезно для длинных таблиц. Попробуйте разместить тег подвала перед тегом тела таблицы.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
}

thead {
  background-color: #6c757d;
  color: white;
}

tfoot {
  background-color: #ffc107;
  color: #333;
  font-weight: bold;
}
HTML
<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Цена</th>
    </tr>
  </thead>
  <input1>
    <tr>
      <td>Всего</td>
      <td>950</td>
    </tr>
  </input1>
  <input2>
    <tr>
      <td>Хлеб</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Молоко</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Сыр</td>
      <td>800</td>
    </tr>
  </input2>
</table>
В этом задании вам нужно вставить `<tfoot>` сразу после `<thead>`, а затем `<tbody>`. Несмотря на такой порядок в коде, визуально подвал останется внизу.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Несколько секций tbody

id: 37836_table-grouping-6

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

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
}

thead {
  background-color: #28a745;
  color: white;
}

tbody {
  border-top: 2px solid #28a745;
}
HTML
<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Категория</th>
    </tr>
  </thead>
  <input1>
    <tr>
      <td>Яблоко</td>
      <td>Фрукт</td>
    </tr>
    <tr>
      <td>Апельсин</td>
      <td>Фрукт</td>
    </tr>
  </input1>
  <input2>
    <tr>
      <td>Морковь</td>
      <td>Овощ</td>
    </tr>
    <tr>
      <td>Картофель</td>
      <td>Овощ</td>
    </tr>
  </input2>
</table>
Вам нужно использовать два набора тегов `<tbody>`. Первый `<tbody>` должен оборачивать строки с 'Яблоком' и 'Апельсином', а второй — строки с 'Морковью' и 'Картофелем'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибуты в группирующих тегах

id: 37836_table-grouping-7

Теги `<thead>`, `<tbody>` и `<tfoot>` — это обычные HTML-элементы, и им можно добавлять атрибуты, например, `class` для стилизации. Добавьте класс `table-summary` к подвалу таблицы, чтобы выделить его стилем.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
}

.table-summary {
  background-color: #e9ecef;
  border-top: 2px solid black;
  font-weight: bold;
}
HTML
<table>
  <thead>
    <tr>
      <th>Год</th>
      <th>Прибыль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2022</td>
      <td>1.2 млн</td>
    </tr>
    <tr>
      <td>2023</td>
      <td>1.5 млн</td>
    </tr>
  </tbody>
  <tfoot input1="table-summary">
    <tr>
      <td>Итого</td>
      <td>2.7 млн</td>
    </tr>
  </tfoot>
</table>
Найдите тег `<tfoot>` и добавьте в него атрибут `class` со значением `table-summary`. Правильная конструкция выглядит так: `<tfoot class="table-summary">`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру