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

Верстка таблиц всегда была сложной задачей для верстальщика. В древние времена (до 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 – по нижней границе ячейки таблицы.

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

Строка 1.

Колонка 1.

Строка 2.

Колонка 2.

Строка 3.

Колонка 3.

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;

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

caption {

display: none;

}

Важно знать

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

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

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

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

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

Тезисно:

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

Сравни.руОнлайн курсыПутеводительКак правильно верстать таблицы

Часто ищут

Интересные предложения

Часто выбирают