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

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

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

Как сделать табличную верстку сайта?

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

Строки и ячейки таблицы. Самое важное правило – информация в таблицах выводится только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).

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

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Эта табличка содержит одну строку, в которой по горизонтали будут расположены три ячейки.

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

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Рис. 2. Две таблицы, только что созданные с помощью html.

В этом случае у нас будет две строки. В первой будет три ячейки, а во второй – четыре. Соответственно, строки следуют друг за другом по вертикали, а ячейки – как уже и говорилось, по горизонтали. Еще мы задали фиксированные размеры ячейкам. Можно также установить цвет, выравнивание, отступы и много чего другого. Например, в css-файл я записал такой код:

table{
	border-spacing: 0;
	margin-bottom: 50px;
}
td{
	border: 2px solid green;
	width: 100px;
	height: 50px;
	background: yellow;
	text-align: center
}

Результат:

Рис. 3. Всего лишь пару строк в css и таблица уже неплохо оформлена.

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

Конечно же, по умолчанию все эти теги сделаны именно для вывода табличных данных. В результате каждая ячейка имеет свою собственную рамку. Чтобы убрать это поведение по умолчанию, нужно всего лишь прописать несколько свойств в css.

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

Плюсы табличной верстки

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

Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом раньше создавали массу декоративных эффектов: нестандартные рамки, уголки, тени.

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

Кроссбраузерность. Теги для табличных данных появились очень давно и поддерживаются даже в старейших версиях Internet Explorer. Сайт на таблицах одинаково выглядит в разных браузерах.

Минусы

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

Ухудшение скорости зарузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены. И тут представьте себе ситуацию, что вы вывели на странице 20 изображений в таблице. Как вы думаете, быстро ли они загрузятся?

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

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

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

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

Два основных правила табличной верстки

Макет должен заполнять по высоте все окно. Это первое правило. Если информации на странице мало, то футер должен быть прижат к нижнему краю окна браузера. Второе правило – все колонки на сайте должны быть одинаковой высоты. Конечно, это только в том случае, если к ним применяется какой-то фон. Тогда все ячейки в строке желательно делать равными по высоте, чтобы макет смотрелся ровно.

Таблицы живы

Табличная верстка сайта в html все еще жива. Она нужна как минимум для вывода табличных данных, но кое где до сих пор есть сайты, сверстанные этим способом. И хотя сегодня табличные теги применяются все меньше и меньше, едва ли они когда-то полностью выйдут из веб-стандартов.

Ну а чтобы быть в курсе этих самых веб-стандартов, необходимо иметь под рукой хороший источник информации. Подписывайтесь на webformyself и изучайте сайтостроение.

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree