Я верстальщик. Веб-верстальщик

Арсений Олегович Матыцин, 2018

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

* * *

Приведённый ознакомительный фрагмент книги Я верстальщик. Веб-верстальщик предоставлен нашим книжным партнёром — компанией ЛитРес.

Купить и скачать полную версию книги в форматах FB2, ePub, MOBI, TXT, HTML, RTF и других

← Стандарты

Блочная верстка →

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

Это сильно устаревшая техника верстки, которую я застал, когда обучался дизайну. Тем не менее нельзя обойти стороной то, из чего выросла технология.

Раньше, чтобы расположить элементы в строку рядом друг-с-другом применялись таблицы. Вот пример:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Example</title>

</head>

<body>

<table width="300"border>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

</body>

</html>

Пример кода табличной верстки

Результат обработки кода браузером Edge

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

Тут в строке tr вложить элемент столбца td, который занимает место 5 ячеек.

Эта часть таблицы объединяет в себе 2 ячейки по горизонтали и 4 ячейки по вертикали

А справа →,

в ячейку вложена таблица 5 на 5, которая по умолчанию отбивается от границ ячейки отступами.

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

Такие манипуляции по склейке ячеек производятся с помощью атрибутов:

colspan — объединение ячеек по ширине

rowspan — объединение ячеек по высоте

Пример:

<tr>

</tr>

<tr>

</tr>

</table>

Результат обработки в браузере

Формально это таблица з на 2, но так как я указал первой ячейке расшириться на 2, то было бы ошибкой во второй строке написать такое же количество ячеек td, как и в первой. Результат был бы тогда такой:

Результат ошибочного кода в браузере

Эти атрибуты легко запомнить, если разбить их на составляющие и знать перевод. Например span, который есть в обоих словах — это пролет, объединение, диапазон. В то же время row — это строка, а col (column) — это колонка.

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

В целом, если вспомнить принцип дизайнера и верстальщика, то это можно воспринимать не как ошибку, а как фичу.

С приходом адаптивного дизайна и верстки над существованием таблиц навис большой вопрос. Так как все попытки отразить сколько-нибудь большую таблицу на экране мобильного телефона оказалось не так просто.

Исторический пример

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

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

Впрочем казалось бы, что такого в табличной верстке и на кой оно вам надо. Ответ прост — она не умерла, а перешла в иное качественное состояние. Сегодня табличная верстка активно используется для создания html-рассылок. В данном случае, в отличие от разработчиков браузеров, разработчики софта для работы с письмами так и не пришли к единому консенсусу и 100% у вас на каждом отдельном устройстве откроются совершенно разные виды на вашу верстку. Порой ужасные.

Чтобы этого избежать там используется не стандарт HTML5, а строгий старый режим HTML4. К нему, вдобавок, идут набором ныне морально устаревшие теги типа center, и приходится использовать ухищрения, которые ни один верстальщик сайтов никогда в здравом уме использовать не будет.

Блочная верстка →

← Стандарты