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

Матыцин Арсений

empty-line/>

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

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

Тут

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

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

А справа ->,

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

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

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

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

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

Пример:

<table width="300" border="1">

<tr>

<td rowspan="2">1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

</tr>

</table>

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

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

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

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

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

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

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

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

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

создание навигации.

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

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

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

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

В отличие от табличной, блочная верстка позволяет набрать необходимое количество элементов страницы без условностей и требований первого метода. Да и в целом этот тип можно отнести к инновационным. Наряду с блочной версткой стали активно использовать внешние файлы css, которые призваны были описывать внешний вид div-ов. Притом эта тенденция (выносить данные) дошла до того, что инлайновые стили стали неким моветоном. Лично я с этим конвейерным и неразумным подходом не согласен.

Разумно использовать внешние стили для повторяющихся элементов, для классов, для медиа запросов и во многих других случаях. Но если в конкретно этом span надо прописать color:red, зачем создавать отдельный класс или id и писать под него стили!?

Float:left

Самое частое свойство, которое мне приходилось использовать во время верстки сайта по блочному методу. Так как по-умолчанию div занимает всю область по ширине, куда он вписан, то, чтобы выстроить в линию несколько блоков необходимо дать им размер – ширину. Но тогда они просто выстроятся один под одним с указанными размерами. Чтобы выполнить «обтекание» нужно использовать свойство float.

Float:left заставляет элемент отобразиться таким образом, чтобы предыдущий был по левую сторону от него.

Небольшой хак

Существует иной способ решить этот вопрос, переноса блоков. Достаточно сменить ему свойство display с дефолтного block на inline-block. Тогда браузер будет воспринимать данный div, как символ в предложении.

Данная тема постепенно приводит нас к каскадным стилям. О них я расскажу после того, как опишу работу с тегами.

Выбор редактора кода (IDE)