Во время верстки сайтов и онлайн-сервисов специалистам предстоит иметь дело с различными элементами. Одним из самых важных являются таблицы. Они помогают упорядочить данные и вывести их на дисплей в виде строк и столбцов.
С таблицами в HTML и CSS необходимо уметь работать. Далее предстоит познакомиться с этим объектом более подробно. Необходимо не только выяснить, что собой представляют таблицы, но и как их создавать, редактировать, группировать. Предложенная информация будет полезна тем, кто планирует начинать изучение верстки и веб-программирования.
Таблица – это…
Таблица – это сетка, которая состоит из ячеек, формирующих столбцы и строки. Примерами таблиц могут выступать финансовые отчеты, календари, расписания и так далее. Отдельный блок сетки – это ячейка таблицы. Такие элементы могут включать в себя различные данные:
- числа;
- текст;
- видео;
- аудио;
- другие объекты.
Таблицы на языке HTML пишутся построчно. Их верстка осуществляется при помощи различных тегов. Наиболее распространенными являются tr и td. Некоторые верстальщики пользуются только ими для настройки таблиц, но это не совсем правильно. Далее предстоит ознакомиться с принципами применения tr и td, а также других тегов для верстки рассматриваемого элемента сайта.
Создание таблицы
Чтобы создать рассматриваемый компонент, необходимо пользоваться парным тегом table. Он выступает в качестве контейнера для всех составляющих таблицы. Все элементы, которые размещаются в изучаемом компоненте, должны находиться внутри этого самого тега.
Вот пример создания table с двумя столбцами и двумя строками:
<table>
< tr >< th >текст заголовка< /th >< th >текст заголовка< /th >< /tr > <!—ряд с ячейками заголовков—>
< tr >< td >данные</ td >< td >данные< /td >< /tr > <!—ряд с ячейками тела таблицы—>
</table>
Видимых границ по умолчанию у table нет. Они задаются при помощи свойства под названием border. Выглядит это так:
Для того, чтобы убрать промежутки между ячейками, необходимо воспользоваться свойством table {border-collapse: collapse;}. По умолчанию ширина изучаемого элемента равняется ширине ее внутреннего содержимого. Установка ширины осуществляется через значение свойства width:
Если для ячеек задаются внутренние отступы и границы, ширина таблицы включает в себя:
- padding-left;
- padding-right;
- border-left;
- border-right.
Если ширина и границы ячеек заданы, шириной таблицы будет называться ширина ячеек, ширина border-left и ширина border-right последней ячейки в имеющемся ряду.
Интервалы и поля
По умолчанию ячейки будут подстраиваться под их содержимое. Иногда встречаются ситуации, когда требуется вокруг табличных данных оставлять некоторое пространство. Оно и называется padding.
Интервалы и поля относятся к элементам представления данных. Соответствующее пространство будет настраиваться через стилевые таблицы CSS.
Поле ячейки (padding) – расстояние между содержимым ячейки и ее границей (border). Чтобы добавить соответствующее свойство, нужно применить padding к td или th.
Интервал ячеек (border-spacing) – расстояние между ними (между td или th). Сначала требуется присвоить значение separate свойству border collapse для элемента table, а затем – установить расстояние между ячейками, внеся изменения в значение параметра border-spacing.
В более старых версиях HTML за поля и интервалы ячеек отвечали такие атрибуты как cellspacing и cellpadding для компонента table. В спецификации HTML5 эти параметры были признаны устаревшими. Теперь они не используются на практике.
Вот наглядный пример использования свойств border-padding и padding. Стоит обратить внимание на то, что интервал ячеек (border-spacing) не будет работать, если ко всей table применяется свойство border-collapse: collapse.
Добавление строк
Ряды таблицы или ее строки можно создать при помощи тега tr. Количество горизонтальных строк в итоговом элементе будет определяться количеством пар tr.
Добавление ячейки заголовка
Заголовок столбца будет задаваться при помощи тега th. Его применение приводит к созданию специальной ячейки, текст в которой будет выделен полужирным. Количество ячеек заголовка будет определяться количеством элементов th (пар).
В программном коде ситуация выглядит так:
<table>
< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr >
</table>
Для соответствующего компонента HTML доступны атрибуты rowspan, headers, colspan.
Ячейка тела таблицы
Ячейки в таблице можно создать при помощи парного тега td. Внутри td будут помещаться табличные данные.
Компоненты < td > и < /td >, которые расположены в одном ряду, служат определителем количества ячеек в строке таблицы.
Количество пар td должно обязательно равняться количеству th. Вот пример реализации добавления ячейки тела таблицы:
<table>
< tr >< th >ячейка заголовка< /th >< th >ячейка заголовка< /th >< /tr >
< tr >< td >ячейка тела таблицы< /td >< td >ячейка тела таблицы< /td >< /tr >
</table>
Для данного элемента могут применяться атрибуты headers, rowspan, colspan.
Заголовок (подпись)
Caption – тег, который необходим для любой таблицы при верстке веб-сервисов. Его содержимое выводится непосредственно перед таблицей. Изменение положения заголовка возможно. Для этого используется свойство caption-side:
- top – отвечает за вывод до таблицы;
- bottom – отображение после.
Правила верстки рекомендуют размещать тег заголовка в самом начале – сразу после table. Caption по умолчанию выравнивает свое содержимое по центру. Для выравнивания по правому/левому краю требуется внести изменения в значение свойства text-align.
Заголовки таблицы нужны для разных целей:
- Для пользовательского удобства. С помощью заголовков намного проще ориентироваться на странице, особенно когда таблиц много.
- Caption помогает людям с ограниченными возможностями. С помощью заголовка таблицы можно получить общее представление о том, что в ней находится. Это помогает понять, стоит ли просматривать соответствующий элемент полностью.
- Caption – компонент, который благоприятно сказывается на оптимизации веб-портала или онлайн-сервиса. Его очень любят разнообразные поисковые системы.
Вот наглядный пример реализации caption в программном коде:
<table>
<caption>Перечень продуктов</caption>
< tr >
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
< /tr >
< tr >
< td >1.< /td >
< td >Томаты свежие< /td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80</td>
< /tr >
< tr >
< td >2.< /td >
< td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td >
< /tr >
< tr >
< td colspan=»5″ style=»text-align:right»>ИТОГО:< /td >< td >1168,80< /td >
< /tr >
</table>
Если заголовок таблицы по умолчанию не предусматривается дизайнером, его может сделать разработчик. Он добавит компонент в разметку и скроет при помощи CSS. Данный прием значительно повысит доступность контента.
Даже скрытый заголовок все равно будет доступен непосредственно для навигации по странице с помощью клавиатуры. Речевой браузер для людей с ограниченными возможностями тоже воспринимает тег caption – читая текст в соответствующем теге, браузер поменяет интонацию, темп речи, а также повысит громкость голоса.
Группировка строк и столбцов
Для группировки в HTML – это colgroup. С помощью этого тега можно создать структурную группу столбцов, выделяя логически однородные ячейки. Группирует соответствующий компонент один или более столбцов. После этой операции столбцы становятся доступны для единого форматирования. К ним можно применять стили, вместо того, чтобы повторять их для каждой ячейки/строки.
Colgroup должен быть добавлен непосредственно после тегов caption или/и table.
С помощью тега col можно сформировать группы столбцов, которые будут делить таблицу на разделы, не относящиеся к общей структуре. Они не включают в себя данные одного и того же типа. Элемент col дает возможность задавать свойства столбцов для каждого столбца в пределах colgroup.
Через атрибут style возможно менять основной цвет фона ячеек. Для компонента col становится доступным параметр span. С его помощью задается количество столбцов для непосредственного объединения.
<table>
<colgroup>
<col span=»2″ style=»background:Khaki»><!— С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы—>
<col style=»background-color:LightCyan»><!— Задаем цвет фона для следующего (одного) столбца таблицы—>
</colgroup>
< tr >
<th>№ п/п</th>
<th>Наименование</th>
<th>Цена, руб.</th>
< /tr >
< tr >
< td >1< /td >
< td >Карандаш цветной< /td >
< td >20,00< /td >
< /tr >
< tr >
< td >2< /td >
< td >Линейка 20 см< /td >
< td >30,00< /td >
< /tr >
</table>
Выше можно увидеть фрагмент программного кода, помогающий понять принцип группировки. А еще – наглядный образец отображения итоговой таблицы.
Группировка разделов
Thead используется для создания группы заголовков для строк table. Это делается для того, чтобы можно быть использовать общие стили оформления. Thead используется в сочетании с тегами:
- tbody;
- tfoot.
Рассматриваемый тег используется так:
- в качестве дочернего элемента table;
- после caption и colgroup;
- перед tbody, tfoot, tr.
Элемент tbody используется для группировки основного табличного содержимого. Он используется в сочетании с тегами thead и tfoot.
Компонент tfoot используется для создания группы строк. Пример – для представления данных о суммах или итогах. Группировка создается в нижней части table. Может быть использована всего один раз.
Вот наглядный пример реализации кода:
<table>
<thead>
< tr >
<th>№ п/п</th>
<th>Наименование товара</th>
<th>Ед. изм.</th>
<th>Количество</th>
<th>Цена за ед. изм., руб.</th>
<th>Стоимость, руб.</th>
< /tr >
</thead>
<tfoot>
< tr >
< td colspan=»5″ style=»text-align:right»>ИТОГО:< /td >< td >1168,80< /td >
< /tr >
</tfoot>
<tbody>
< tr >
< td >1.< /td >
< td >Томаты свежие</ td >< td >кг< /td >< td >15,20< /td >< td >69,00< /td >< td >1048,80< /td >
< /tr >
< tr >
< td >2.< /td >
< td >Огурцы свежие< /td >< td >кг< /td >< td >2,50< /td >< td >48,00< /td >< td >120,00< /td >
< /tr >
</tbody>
</table>
Соответствующая группировка появилась в стандарте с расчетом на то, что браузеры при отображении длинных таблиц обеспечат прокрутку строк с данными при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут воспользоваться надзаголовком и подзаголовком в качестве колонтитулов страницы. Современные браузеры так не работают. Они или просто отображают thead и tfoot в качестве информационных строк, либо помещают их в начало и конец table.
Атрибуты для работы с табличными элементами
В процессе работы с табличными компонентами часто предстоит иметь дело с разнообразными атрибутами. Таблица, представленная ниже, поможет лучше ориентироваться на них:
| Название атрибута | Описание и принимаемые значения |
| Colspan | Указывает на количество ячеек в строке для объединения по горизонтали. Форма представления: td colspan = «3». Может принимать значения в диапазоне от 1 до 999. |
| Headers | Используется для задания списка ячеек заголовка, содержащих данные о текущей ячейке данных. Используется для речевых интернет-обозревателей. Задается через формы:Th id= «идентификатор»…/thTh headers = «идентификатор»…/thПринимаемыми значениями служит список имен ячеек, которые разделяются друг от друга пробелами. Соответствующие имена присваиваются через их атрибут – id. |
| Rowspan | Используется для отображения количества ячеек в столбце для объединения по вертикали. Задается как:Td rowspan= «2»Данный атрибут может принимать значения от 1 до 999 включительно. |
| Span | Указывает на количество колонок, которые объединяются для задания единого стиля. По умолчанию параметр имеет значение 1.Форма представления:Col span = «2»Значения, которые может принимать этот атрибут, – любое. Главное, чтобы им было целое и положительное число. |
Теперь понятно, как работать с предложенными атрибутами. Они пригодятся каждому верстальщику.
Структура таблицы: кратко о важном
Чтобы лучше понимать принципы работы с табличными элементами, рекомендуется рассмотреть структуру таблицы. Она напоминает HTML-страницу.
Шапка
Thead – это «шапка» таблицы. Она представляет собой заголовочную секцию. В thead используется тег th для ячеек. О том, как работать с шапкой, уже было сказано.
Заголовки столбцов и строк
Th позволяет создавать особые ячейки, с которых начинаются строки или столбцы. В таком элементе обычно хранится атрибут для всех данных строки/столбца.
Th нельзя применять для визуального форматирования. Данный принцип распространяется на все элементы разметки, которые имеют семантику.
Тело
Tbody – это тело. Оно включает в себя часть данных и группирует главные части таблицы. Tbody можно использовать несколько раз – до бесконечности. Этот прием позволяет дробить контент на части, сохраняя логическую связь.
Заголовка caption тут не будет. Его придется придумывать и скрывать через CSS.
Подвал
Tfoot – секция, которая используется для группировки данных в нижней части таблицы. Это подвал рассматриваемого компонента. С семантической точки зрения подвал – это итог имеющихся данных.
Он также выступает в качестве нижнего табличного колонтитула. Браузер будет выводить его после tbody. При печати tfoot может размещаться как на каждой напечатанной странице, так и только на последней. Здесь все зависит от браузера.
Теперь понятно, что такое td и tr, а также как работать с этими элементами. Лучше разобраться в веб-программировании и верстке помогут специальные дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
