Как правильно верстать таблицы

Верстка таблиц всегда была сложной задачей для верстальщика. В древние времена (до HTML5) дело отдавали на откуп тегу table, и, пока не было понятия семантической верстки, верстальщики организовывали табличную верстку через теги tr/td, и этих HTML кодов вполне хватало. Но – пришли новые технологии, и нужно было «подружить» блочную верстку с поисковыми роботами (которые до этого таблицы, в общем-то, игнорировали), что привело к появлению более сложной семантической верстки. Ниже мы расскажем, как применять эту верстку сайта, какие используются теги и как в этом замешаны CSS стили.

Верстка таблиц

База верстки – это 3 тега: table, tr, td. Table – это заголовок всей таблицы, он говорит браузеру, что все в его пределах нужно верстать в колонках и ячейках. Внутрь table вложены заголовки строк – tr. А вот в уже в строки вложен заголовок столбца и сам столбец, эта честь отведена тегу td. Получается каскадная структура – есть table, внутри него прописаны ряды, для каждого ряда указаны колонки с содержимым ячейки (для простоты колонки td можно считать ячейками):

<table> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>0ab</td> <td>cde</td> <td>fgh</td> </tr> </table>

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

Добавление стиля оформления – такое же, как и для других тегов, можете обращаться сразу к table/tr/td или прописать классы/id и задать ширину/другие параметры отдельным классам. Основные полезные команды стилей: border (толщина/заливка/цвет рамки), width (ширина, в % или фиксированная), border-collapse (объединить двойные границы в одинарные), padding (отступы).

Еще одна важная функция, относящаяся к базовой верстке – объединение ячеек. Задается соединение блочных элементов атрибутами colspan (сколько ячеек вниз от текущей будет объединено) и rowspan (сколько ячеек вправо от текущей будет объединено). Естественно, количество объединяемых ячеек не должно превышать общее количество ячеек доступных с этой точки ячеек, иначе с дизайном сайта можно будет попрощаться – все поедет. К примеру:

<table> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> <tr> <td>Машка</td> <td rowspan="2">20</td> <td>570</td> </tr> <tr> <td>Буренка</td> <td rowspan="2">770</td> </tr> <tr> <td>Авдотья</td> <td>15</td> </tr> </table>

Содержимое CSS:

table { border: 2px solid black; border-collapse: collapse; width: 50%; } td { border: 1px solid black; }

Результат:

Обратите внимание: поскольку мы объединяем элементы td с атрибутом rowspan, нам нужно выкинуть из таблицы ячейки td, которые будут замещены – поэтому первой строкой мы задаем заголовки таблицы, тегом tr и тремя тегами td мы размечаем 3 ячейки второго ряда, а вот в третьем и четвертом ряду мы уже указываем по 2 ячейки – 3-я ячейка в 3 и 4 ряду прописана через rowspan в предыдущем ряду.

Если добавить лишнюю ячейку, взаимное расположение блочных элементов «поедет».

Семантическая верстка таблиц

Как вы могли заметить, в примере выше мы использовали в первом ряду тег th вместо td. Это – первый шажок к семантической верстке таблиц. Сразу отметим, что семантическая верстка на адаптивную верстку никак не влияет – эти верстки никак друг с другом не связаны. Адаптивная верстка используется для создания сайтов, дружелюбных к маленьким размерам экрана – в этом случае макетом сайта сразу предполагается возможность сужения и переразмещения блоков для того, чтобы добиться наилучшего отображения для данной ширины экрана. Семантическая верстка – это когда мы закладываем в таблицу семантику, то есть смысл, для поисковых роботов и программ для чтения с экрана.

В семантической верстке используют теги, которые помогают машинам понять контекст той или иной строки/ячейки/области таблицы.

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

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

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

Еще большего эффекта удается добиться, если правильно сочетать семантическую верстку таблицы с CSS (каскадными таблицами стилей).

Структура таблиц

Здесь разберемся с использованием тегов thead, тегом tbody и tfoot. Все 3 используются для того, чтобы показать браузеру/программам/роботам о логическом разделении таблицы – вы можете воспринимать их, как head/body/footer страницы, только примененным к конкретной таблице. Thead – это тег, который ставится перед tr в шапке таблицы. В thead вместо td используется th, потому что каждая ячейка содержит в себе заголовок колонки, и это нужно как-то подчеркнуть. Собственно, браузер это и подчеркивает – когда мы используем для табличных данных thead и th, они отображаются жирным шрифтом и располагаются по центру ячейки, даже если мы не прописываем это в CSS:

<thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …

Tbody – это тег, который показывает, что здесь находится тело таблицы. Таких тегов может быть несколько – это удобно, когда вам нужно создать несколько разделов таблицы, и каждому назначить разные стили табличных данных.

… <tbody class="first"> <tr> <td>Машка</td> <td>20</td> <td>570</td> </tr> </tbody> <tbody class="second"> <tr> <td>Буренка</td> <td>25</td> <td>770</td> </tr> </tbody> <tbody class="third"> <tr> <td>Авдотья</td> <td>15</td> <td>440</td> </tr> </tbody> …

CSS:

.first { color: red; } .second { color: blue; } .third { color: green; }

Результат:

Наконец, tfoot используется для того, чтобы подвести какой-либо итог таблицы. Часто в tfoot выносится сумма:

… <tfoot> <tr> <td>Всего:</td> <td>60</td> <td>1780</td> </tr> </tfoot>

Результат:

Заметьте, что tfoot не накладывает на содержимое ячеек никакого стиля – вам нужно прописывать его самостоятельно в CSS.

Строки и ячейки таблицы

Как мы уже говорили, строки прописываются через tr, ячейки прописываются через td. Если вы прописываете первую строку через thead – крайне желательно выделить ячейки первой строки тегами th, а не td. Th показывают браузеру и всем интересующимся программам, что они имеют дело конкретно с заголовочной ячейкой. Тем же программам-ридерам это позволяет правильно зачитать таблицу для человека с плохим зрением – программа понимает, что нужно зачитывать данные сверху вниз, от одного столбика к другому, с отдельным выделением заголовочной ячейки – чтобы слушатель понял, что за заголовком последует информация.

Еще стоит отметить, что управляющие семантикой теги thead, tbody и tfoot практически никак не влияют на саму таблицу – если вы уберете их, все останется на своих местах.

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

Объединение ячеек

Основные правила объединения ячеек мы давали выше – вам нужно использовать rowspan и colspan. Первый объединяет ячейки вниз от текущей, второй объединяет ячейки вправо от текущей. Оба можно использовать одновременно – при rowspan = colspan = 2 вы получите квадрат размером 2 на 2 ячейки. Если объединяете ячейки, то удаляйте лишние – иначе таблица сломается.

Для большего понимания целесообразно привести пример таблицы с объединенными ячейками. Она имеет такой вид.

Чтобы получить данную визуальную реализацию табличного формата, необходимо написать соответствующий исходный программный код. Сначала задаются базовые параметры таблицы, не предусматривающие объединения столбцов или строк.

<table> <thead> <tr> <th>Сотрудник</th> <th>Зарплата</th> <th>Бонусы</th> <th>Менеджер</th> </tr> </thead> <tbody> <tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td>Кодовенок Хекслетович</td> </tr> <tr> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> <td></td> </tr> <tr> <td>Джедай Падаванов</td> <td>500$</td> <td>100$</td> <td>Королева Верстальщина</td> </tr> <tr> <td></td> <td></td> <td></td> <td>Всего: 2613$</td> </tr> </tbody> </table>

Далее необходимо избавиться от пустых ячеек, что позволит расположенной по соседству информации занять все предусмотренное объединением пространство. Для этого используются два HTML-атрибута:

• объединение столбцов производится посредством включения в код colspan;
• аналогичная операция в отношении строк – через атрибут rowspan.

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

Сначала - для сотрудников, закрепленных за одним менеджером.

<tr> <td>Алексей Примадонин</td> <td>750$</td> <td>63$</td> <td rowspan="2">Кодовенок Хекслетович</td> </tr> <tr> <!-- В этой строке теперь только три столбца --> <td>Вениамин Редакторович</td> <td>1200$</td> <td>0</td> </tr>

Затем – для итоговой строки таблицы.

<tr> <!-- В этой строке всего один столбец, который растянется на 4 --> <td colspan="4">Всего: 2613$</td> </tr>

Код для объединения ячеек размещается после установки базовых параметров таблицы. Но до последнего тэга </table>.

Выравнивание содержимого таблицы по вертикали

Табличная верстка часто предусматривает необходимость выровнять контент по вертикали. Для этого используются несколько тэгов, у каждого из которых имеется своя специализация. Чаще всего речь идет о свойстве vertical-align, которому присваивается подходящее из четырех доступных значений, показывающее как именно будет происходить выравнивание:

• baseline – по так называемой базовой линии используемого шрифта;
• top – по верхней границе табличной ячейки;
• middle – по центральной части;
• bottom – по нижней границе ячейки таблицы.

Пример подобного кода представлен ниже. Он позволяет получить таблицу примерно следующего вида:

body { font: 18px/1.5 sans-serif; color: #333; } table { border-collapse: collapse; } table, td { border: 1px solid #000; } td { height: 70px; padding: 10px 20px; } .vertical-top { vertical-align: top; } .vertical-bottom { vertical-align: bottom; }

Заголовок таблицы

Последний семантический инструмент, который вам обязательно нужно использовать – это заголовок таблицы (caption). Выше мы приводили аналогию «таблица – страница», и заголовок для таблицы так же важен, как H1 для страницы. Добавляется он в самое начало таблицы, после тега <table>:

<table> <caption>Удой агрофермы "Ромашкино"</caption> <thead> <tr> <th>Имя коровы</th> <th>Средний удой молока в день</th> <th>Удой молока в месяц</th> </tr> </thead> …

Браузер сам поставит заголовок по центру таблицы, перед ней (то есть выше нее). В CSS можно прописать

caption-side: bottom;

caption { display: none; }

Важно знать

Итак, зачем все это? Пока что все выглядит так, как будто вам предлагают прописать пару ненужных тегов и усложнить себе жизнь. На самом деле, такой версткой вы существенно упростите жизнь людей, которые плохо видят и пользуются специальными программами для озвучивания находящегося на экране текста. И за то, что вы это сделаете, Гугл вознаградит вас более высокими позициями в выдаче. Вообще, для Гугла это – не первая такая практика, все опытные SEOшники прекрасно знают, что для изображений нужно прописывать тег alt, даже если по факту это почти никогда не пригодится. Здесь – то же самое. Когда поисковый робот приходит на ваш сайт, он смотрит не только на контент, но и на качество верстки. Если у вас прописаны альты, расставлены теги головы/контента/подвала таблиц, есть заголовок (пусть и скрытый – робот его все равно видит, поскольку он анализирует HTML-код) – робот приходит к выводу, что страница – качественная, и в нее были вложены силы, после чего повышает скоринг страницы при ранжировании. Еще одна полезная награда от поисковика – это виджеты. Когда пользователь ищет что-то, Гугл может на свое усмотрение выдать человеку не сухой список страниц, а, например, таблицу, взятую со страницы сайта. Если таблица размечена с помощью семантической верстки – шансы появления этой таблицы прямо на странице выдачи существенно повышаются.

Если же таблица размечена криво и без семантики – нет вообще никаких шансов на то, что она окажется на главной.

Что почитать по теме

Хорошие и короткие стандарты разметки таблиц от интернет-консорциума W3 (на английском):

• Об использовании id и хедеров.
• Использование заголовка.
• Как лучше располагать информацию в таблице.
• (продвинутая тема) Использование scope для обозначения диапазона ячеек, принадлежащих заголовку.
• (продвинутая тема) Использование атрибута summary для подведения краткого итога таблицы.

Подведем итоги

Тезисно:

• Семантическая верстка – это когда вы размечаете не только ячейки таблицы, но и логические/информационные разделы.
• За структуру отвечают теги thead, tbody, tfoot – они задают заголовок данных/тело/сводку таблицы.
• Caption задает общий заголовок таблицы – его можно поместить вниз или скрыть.
• Теги разметки никак не влияют на саму таблицу – они показывают роботам и специальным программам-ридерам, где что находится.
• Семантическая верстка таблиц существенно улучшает ранжирование страницы.