Тег <tfoot>: итоговые строки таблицы
Tfoot выделяет итоговую часть таблицы, например сумму или сводку по данным. Его назначение — структура документа; сам элемент не выполняет вычисления и не обновляет результат.
Назначение
Tfoot выделяет итоговую часть таблицы, например сумму или сводку по данным. Его назначение — структура документа; сам элемент не выполняет вычисления и не обновляет результат.
Как это работает
Разместите tfoot после основных групп строк. Итоговая подпись может быть заголовочной ячейкой с scope="row". Количество ячеек должно соответствовать остальной таблице с учётом явно заданного объединения.
Пример
<table><caption>Время учебных заданий, минуты</caption><thead><tr><th scope="col">Задание</th><th scope="col">Время</th></tr></thead><tbody><tr><td>Разметка</td><td>20</td></tr><tr><td>Проверка</td><td>10</td></tr></tbody><tfoot><tr><th scope="row">Всего</th><td>30</td></tr></tfoot></table>Что должно получиться
Итог находится в отдельной группе и показывает сумму двух учебных значений. Если изменить исходные числа вручную, число 30 останется прежним до явного обновления.
Граница применения и частая ошибка
Не объявляйте любую последнюю строку итоговой только из-за её положения. Если таблица фильтруется, объясняйте, относится сумма ко всем данным или только к видимым. Внешнее оформление и поведение при печати проверяются отдельно от семантики.
Самостоятельная проверка
Добавьте третье задание и пересчитайте итог. Затем подпишите, какие именно строки входят в сумму. Проверьте, что единица измерения указана один раз в понятном месте и не приходится угадывать смысл чисел.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.