Сайт о правильных сайтах







Введение

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

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

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

Наверное каждый, кто так или иначе начинает сталкиваться с версткой (или как ее теперь стали называть HTML - кодингом ), слышал хотя бы раз о верстке "блоками". Определим, что означает "табличная" и "бестабличная" верстка. Табличной будем называть верстку, в результате которой все элементы на странице так или иначе находяться во внутренних элементах таблицы, таких, как например <tr> и <td>.

Бестабличной будем называть верстку, в результате которой в исходном коде нет ни одного тега <table>. Но какая разница таблица или не таблица? Что бы ответить на этот вопрос надо заглянуть в начала развития HTML, как языка разметки, при этом можно понять, что таблицы предназначались совсем не для "разметки страниц", а для структурированного вывода информации, например наименований товаров и их цен. Но время шло, веб-сайты становились все сложнее по наполнению контентом, что и привело к тому, что верстальщики стали использовать таблицы, так как других способов расположить несколько элементов на странице на одной линии и с нужным выравниваем просто не было. А тем временем веб-сайты становились еще сложнее, стали перерастать в порталы — графическое оформление которых становилось все изощрённее, в результате чего работа верстальщика так же становила сложнее и запутаннее — куча таблиц, таблица в таблице, а в ней еще и еще. Порой глубина вложенности таблиц достигала десятка, а то и больше. Кроме этого, таблицы загружаются и отображаются в браузере только тогда, когда загрузится весь внутренний контент таблиц, что не совсем удобно, ведь пользователю с медленным подключением к Интернету не сильно приятно смотреть на пустой экран в течении нескольких секунд, скорее всего он просто перейдет на сайт, который быстрее загрузится. Возникали сложности работы поисковиков с табличными сайтами, так как не все браузеры хорошо поддерживают таблицы.

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

Сами по себе таблицы не противоречат ни здравому смыслу, ни рекомендациям W3C, если они используются по назначению, т.е. для структурирования данных, организованных подобающим образом, а их оформление определяется при помощи CSS без применения визуальных атрибутов HTML.

Таблицы и блочная модель CSS — это не взаимоисключающие, а взаимодополняющие инструменты, каждый из которых служит своим определённым целям.

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

Таблицы и CSS

Ниже приводится пример создания и оформления таблицы с индивидуальными рамками для ячеек.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>Таблица с индивидуальными рамками вокруг каждой ячейки</title>

<style type="text/css">

<!--

 table {

   border-collapse: separate;

   }

 td {

  border: solid 1px #c00;

   }

-->

</style>

</head>

<body>

<table>

 <tr>

  <td>Город</td>

  <td>Население, тыс. чел.</td>

 </tr>

 <tr>

  <td>Москва

  <td>10 383</td>

 </tr>

 <tr>

  <td>Санкт-Петербург</td>

  <td>4 661</td>

 </tr>

 <tr>

  <td>Новосибирск</td>

  <td>1 426</td>

 </tr>

</table>

</body>

</html>

пример 1

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

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>Сложное оформление таблицы</title>

<style type="text/css">

<!-->

 table {

  border-collapse: separate;

  border: solid 2px #c00;

  border-spacing: 5px 10px;

   }

 td {

  padding: 0px 5px;

  border: solid 1px #c00;

  background: #fff0cc;

   }

-->

</style>

</head>

<body>

<table>

 <tr>

  <td>Город</td>

  <td>Население, тыс. чел.</td>

 </tr>

 <tr>

  <td>Москва</td>

  <td>10 383</td>

 </tr>

 <tr>

  <td>Санкт-Петербург</td>

  <td>4 661</td>

 </tr>

 <tr>

  <td>Новосибирск</td>

  <td>1 426</td>

 </tr>

</table>

</body>

</html>

пример 2

На практике часто бывает необходимо растянуть те или иные ячейки на несколько строк или столбцов, для этих целей в HTML предусмотрены атрибуты rowspan и colspan, применимые к тегам, определяющим ячейки таблицы (<td> и <th>). Значением атрибута rowspan выступает число строк, на которые растягивается данная ячейка вниз по вертикали, начиная со своего начального, определённого разметкой положения. Значением атрибута colspan служит, соответственно, количество столбцов, на которые данная ячейка растягивается вправо по горизонтали. Одна и та же ячейка таблицы может быть растянута как в вертикальном, так и в горизонтальном направлениях.

Необходимо только следить за тем, чтобы в разметке тех строк, на которые распространяет своё влияние растянутая ячейка, было определено правильное число ячеек. Сказанное выше продемонстрировано на следующем примере:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>

  <title>Объединение ячеек</title>

<style type="text/css">

<!--

 table {

  border-collapse: collapse;

  border: solid 2px #c00;

   }

 tr {

  vertical-align: top;

   }

 td {

  padding: 0px 5px;

  border: solid 1px #c00;

  background: #fff0cc;

   }

-->

</style>

</head>

<body>

<table>

 <tr>

  <td colspan="2">Технологии</td>

  <td>Год утверждения в качестве рекомендации W3C</td>

 </tr>

 <tr>

  <td rowspan="4">Языки разметки</td>

  <td>HTML 4.01</td>

  <td>1999</td>

 </tr>

 <tr>

  <td>XHTML 1.0</td>

  <td>2000</td>

 </tr>

 <tr>

  <td>XHTML 1.1</td>

  <td>2001</td>

 </tr>

 <tr>

  <td>XHTML 2.0</td>

  <td>Обладает статусом Working Draft</td>

 </tr>

 <tr>

  <td rowspan="2">Каскадные листы стилей</td>

  <td>CSS2</td>

  <td>1998</td>

 </tr>

 <tr>

  <td>CSS2.1</td>

  <td>Обладает статусом Candidate Recommendation</td>

 </tr>

</table>

</body>

</html>

пример 3




Обновить страницу