Каково использование группы Table-Header и Table-Footer Group в CSS

Что такое группа заголовков таблиц?

В CSS « Группа заголовков таблиц ' используется для отображения заголовка таблицы через ' ' ярлык. Заголовок соответствует первой записи в вертикальном столбце. Он указывает информацию о записях таблицы. Заголовок также может охватывать несколько столбцов, если это необходимо. Это можно сделать, создав группу столбцов таблицы в CSS.

Пример
Заголовок таблицы имеет формат, отличный от остальных записей в таблице, чтобы выделить его визуально. Обычно они представлены жирным шрифтом или текстом в верхнем масштабе. При перечислении имен «мужчин» и «женщин» мы можем назначить их в качестве заголовков в отдельной строке, как показано в примере ниже:

Следующие шаги объясняют, как создать заголовок таблицы:

• Добавить ' <таблица> », чтобы создать таблицу.
• На следующем шаге укажите « », ссылающийся на заголовок таблицы.
• Добавьте значения заголовка в виде строки с помощью тега «» и закройте заголовок с помощью тега «».
• Теперь включите « », чтобы начать тело таблицы.
• Вставьте данные для каждой из строк, используя тег «».
• Заключите тело таблицы и таблицу через « ' и ' » теги соответственно.

Выход

Что такое группа Table-Footer?

“ Группа нижнего колонтитула таблицы ” используется для отображения нижнего колонтитула таблицы в CSS с помощью “ ' ярлык. Нижний колонтитул также содержит информацию о содержимом таблицы, которая может помочь читателю лучше понять данные. Используя тот же пример из предыдущей части, добавьте нижний колонтитул, в котором указано общее количество записей в каждом столбце для «мужчин» и «женщин» в таблице.

Пример
Обзор следующего примера, объясняющего обсуждаемую концепцию:

Следующие шаги объясняют шаги по созданию нижнего колонтитула таблицы:

• Как и в предыдущем примере, добавьте « <таблица> ” для создания/включения таблицы.
• Включите « », чтобы указать заголовок таблицы.
• Теперь аналогичным образом добавьте заголовки в виде строки и закройте заголовок через « ' ярлык.
• Напомним рассмотренные подходы к указанию тела таблицы и включению в нее данных.
• Теперь добавьте « », чтобы начать нижний колонтитул таблицы.
• Добавьте данные для нижнего колонтитула таблицы в виде строки и закройте нижний колонтитул с помощью кнопки « ' ярлык.
• Наконец, завершите таблицу, используя « ' ярлык.

Выход
Написанный выше код генерирует следующий результат:

Заключение

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