Табличная верстка: теория

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

Короче, я без понятия, какого лешего я начал вещать о табличной верстке с этих рассуждений, но одно скажу точно - вольности по использованию тега "<table></table>" в свое время привели к буму табличной верстки, когда она использовалась повсеместно. Почему тег, предназначенный исключительно для отображения данных в таблице, был настолько популярным способом верстки?

Тег <table> и его дети

Для начала разберемся в принципе с тегом <table>. Он служит контейнером для элементов, определяющих содержимое таблицы.

Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>,<tr> и <thead>.

1) <caption> - создает заголовок к таблице, представляющий собой текст, по умолчанию отображаемый перед таблицей и описывающий её содержание.

2) <thead> - определяет заголовок таблицы (хедер).

3) <tbody> - определяет тело таблицы.

4) <tfoot> - определяет нижний колонтитул страницы (футер).

5) <tr> - создает строку таблицы.

6) <th> - создает заголовок ячейки таблицы.

7) <td> - создает ячейку таблицы.

8) <col> - выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа. Часто используется с тегом <colgroup>.

9) <colgroup> - создает структурную группу столбцов, выделяющую множество логически однородных ячеек.

Все перечисленные теги работают только внутри тега <table>.

Как вы поняли, этот тег в первую очередь предназначен для отображения данных в табличном виде. Например, следующая таблица:

задается таким HTML-кодом:

Хочу обратить внимание на тег "<div id="table-header">". Это демонстрация мощности таблиц - внутри некоторых табличных тегов (<thead>, <tfoot>, <td>) можно помещать другие теги, задавая тем самым уникальный и оригинальный вид таблицы. Даже больше скажу - внутри ячеек таблицы можно размещать другие таблицы. Так, в данном примере я поместил внутрь хедера таблицы дивчик со стилем:

#table-header {

  font-weight: 600;

}

С помощью него я задал насыщенность шрифта (сделал его жирным, кароч). Подробнее про front-weight.

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

Табличная верстка

У таблиц по умолчанию нет видимых границ между строками и колонками. Таким образом, можно размещать элементы по всей странице, и не будет заметно, что для этого используется тег <table>.

В примере выше легко понять, как, используя тег <table>, получить подобный макет: мы задаем в таблице заголовок (<thead>) с выравниванием по центру, в теле таблицы создаем две строки с тремя колонками, причем первая строка содержит ячейки - заголовки (<th>), а вторая обычные ячейки (<td>), футер делаем с помощью <tfoot>. Левый и правый ряд мы зададим с фиксированной шириной, для среднего ряда зададим ширину в процентах.

Понятно, что это совсем простой пример, и для полноты картины необходимо подключать стили, задавать какие-то дополнительные атрибуты и так далее. Как обычно, более подробно мы обсудим это на практике.

Если резюмировать сказанное выше, добавив еще пару моментов, получим преимущества табличной верстки:

1) Создание колонок - одноколонная модульная сетка применяется на сайтах достаточно редко. Чаще основной текст и ссылки по сайту располагают в разных колонках, тем самым разделяя их. И таблицы хорошо выступают в качестве многоколонной модульной сетки - каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся друг под друга (помните, что происходит с плавающими блоками при уменьшении размера окна?). К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

2) "Резиновый" макет - таблицы подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Однако, в современном вебе есть более подходящие кандидаты для подобных макетов, но они гораздо сложнее для понимания и оставлены на десерт. В простых случаях, когда не хочется заморачиваться, таблицы будут самым подходящим вариантом.

3) "Склейка" изображений - рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

4) Фоновые рисунки - в ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом.

5) Выравнивание элементов - содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.

6) Универсальность - таблицы во всех браузерах отображаются практически одинаково, поэтому можно не заморачиваться по поводу кроссбраузерной верстки.

В чем же проблема табличной верстки? Есть парочка моментов, из-за которых нежелательно использовать таблицы в качестве верстачного инструмента:

1) Долгая загрузка - пожалуй, самая пичалька. Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. И если у вас будет довольно большая таблица с кучей всяких наворотов внутри ячеек, пользователь от ожидания загрузки страницы волосы на себе рвать начнет и убежит с вашего сайта с воплями и проклятиями.

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

3) Плохая индексация поисковиками - за счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами. В результате документ не попадает в первую десятку выдачи запроса по ключевым словам, хотя вполне может и заслуживать это. По поводу поисковой оптимизации (SEO) мы еще поговорим, пока просто запомните, что ваш сайт тяжелее будет найти в поисковике, если вы используете верстку таблицами.

4) Нет разделения содержимого и оформления - в идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

В итоге имеем кучу преимуществ, и столько же недостатков. В каких же случаях используется табличная верстка?

Я думаю, что только когда не хочется заморачиваться с более сложной версткой. Если сайт состоит из одних и тех же компонентов (левая и правая боковая панель, контент посередине, заголовок и "подвал"), поддержка сайтов для мобильных устройств не нужна (в принципе на адаптивность начхать), но при этом нужен "резиновый" макет - используйте табличную верстку. Если не воротить сложный макет, её легко реализовать и поддерживать. Собственно, если нужен сложный макет, существуют другие инструменты, потому они и сложны для понимания, иначе никак. А для простых макетов подойдет и простая табличная верстка. Поэтому, как мне кажется, этот способ верстки до сих пор существует.

Но даже при отказе от табличной верстки, сам тег <table> все равно нужно знать - ведь его первоначальное предназначение - отображение данных в табличном виде - никуда не делось, и разбираться с этим обязан каждый верстальщик. Поэтому в следующей практической статье мы рассмотрим и верстку таблицами, и показ данных с помощью таблицы.

Итого

Табличная верстка занимает особое положение в мире веба. В свое время это был самый популярный способ верстки сайтов. А иначе и быть не могло - сайты тех времен звезд с неба не хватали, создавались в основном для текстовых блогов, статей, полезных материалов, в общем, для статической информации. Потом уже, с приходом динамического контента (форумы, интернет-магазины, социальные сети) и необходимости отображать сайт на различных устройствах от табличной верстки стали отходить.

Тем не менее, тег <table> никуда не делся и продолжает активно использоваться по прямому назначению. И мы вместе попрактикуемся с ним в следующей статье. Всем бобра!