В шапке блога написано, что он посвящен программированию и веб-разработке. Программирование тут уже было, а вот до веба я еще не добрался. Эта статья будет первой.
Русский интернет (уже наконец) вовсю осваивает "дизайн через CSS", но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.
В этой первой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследовались при их написании. То есть, эта статья о том, "что это" и "зачем это", а не "как это".
Понятия
Для начала я хочу определиться с понятием "табличная верстка". Если вы начинали заниматься веб-разработкой в 90-е годы, то знаете, что верстать страницу можно было двумя способами: потоком или таблицами. Первый способ - это попросту отсутствие всякой верстки, когда один за другим сверху вниз идут заголовки и абзацы. А таблицы - это когда вся страница представляется в виде сетки, в которую в нужные места уже вставляются текст, картинки и другие таблицы. Причем, сама по себе структура этих <table>, <tr>, <td> позволяет создать сетку любой сложности.
Однако, если быть совсем честным, то только одной сеткой дело не ограничивалось. Таблицы использовались еще и для разных оформительских нужд, например:
- это единственный способ центрирования содержимого по вертикали
- с помощью таблицы 3x3 ячейки делались рамки с оформлением углов
- добавьте свое, наверняка у вас полно любимых приемов
Вот это:
<table width="100%" background="/i/bg_top.jpg" style="background-repeat: no-repeat;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75%" valign="bottom">
<img src="/i/_.gif" width="1" height="40" border="0" alt=""><br>
<table border="0" cellspacing="0" cellpadding="0"><tr valign="top">
<td><img src="/i/_.gif" width="25" height="1" border="0" alt=""><br></td>
<td><a href="/"><img src="/i/logo.gif" width="213" height="90" border="0" alt=""></a><br></td>
<td><img src="/i/slogan.gif" width="124" height="90" border="0" alt=""><br></td>
</tr></table>
</td>
<td bgcolor="#ffffff" background=" "><img src="/i/_.gif" width="1" height="1" border="0" alt=""><br></td>
<td width="25%" bgcolor="#0C2E82" background=" ">
<table width="100%" border="0" cellspacing="2" cellpadding="2"><tr valign="top">
<td align="center">
<table width="90%" cellpadding="0" cellspacing="1" border="0">
<tr valign="top">
<td colspan="3"><span class="white small"><b>Персональный кабинет</b></span></td>
</tr>
<tr valign="top">
<td><span class="white small">логин</span></td>
<td><span class="white small">пароль</span></td>
<td> </td>
</tr>
... я и называю табличной версткой.
Проблема
Есть куча исторических причин, почему HTML в конце 90-х годов прошлого века стал выглядеть именно так, но это тема отдельной статьи. Однако, примерно в то время все больше стало появляться людей, которые, смотря на то, куда это все развивается, стали громко говорить, что это плохо. Я постараюсь здесь свести воедино то, что эти и другие "евангелисты" неустанно говорят и пишут в книжках по поводу недостатков табличной верстки.
- Много кода
Табличная верстка занимает неприлично много места. Страница более-менее хорошо упакованного сайта легко может занимать и 80КБ, и 120КБ... Это без картинок. Все это выливается не только в медленную загрузку и отрисовку, но и в немаленькие деньги за трафик как для сайтов, так и для клиентов. Ведь если картинки хотя бы кешируются браузером, то всю верстку для каждой новой страницы он неминуемо грузит заново, как бы похожа на предыдущую та ни была (кто тут сказал слово "фрейм"? не надо...).
- Трудная правка
Табличную верстку трудно править вручную. Несмотря на большое развитие визуальных редакторов кода, от этой проблемы они не спасают. Если ваш сайт - динамический, значит он собирается из кусков шаблонов. И значит шаблоны будут состоять из фрагментов таблиц. Если вам приходилось когда-нибудь смотреть в такой фрагмент и думать, относится ли вот эта </td>