css(8) html(19) JavaScript(23) MODx(17) Perl(21) php(20) RegExp(13) SEO(7) гаджеты(1) задачка(9) интернет(35) лытдыбр(10) полезности(35) разное(10) разработка(37) софт(11) тесты(4) юмор(5)

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

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

Раньше, когда браузеры были большими, а разрешение и скорость Интернета — низкими, все верстали таблицами. Это означало, что весь дизайн сайта, вообще весь сайт, представлял собой одну большую таблицу, с вложнеными в нее другими таблицами. Уровней вложения могло быть много, и это делало код очень сложным для сопровождения и доставки браузеру.

Нецелевое использование таблиц началось в эпоху доткомов, когда каждая коммерческая фирма хотела создать себе сайт, для увеличения продаж или своего веса на рынке. Задачей было (и остается) — выделиться, ошеломить посетителя, чтобы тот сказал: «Да, это круто!». Поэтому дизайнеры начали воротить довольно сложные макеты, которые невозможно было сверстать другими методами. А когда вспоминали, что весь Интернет пользуется различными браузерами, которые очень по-разному тогда интерпретировали html, вообще хватались за голову. Но задача была поставлена: позиционировать элементы дизайна так, чтобы они достойно смотрелись в большинстве браузеров.

Сейчас, наверное, никто не скажет, кто придумал решение этой проблемы. Однако, за этим гением потянулись все. Решение было такое: «распилить» макет сайта на кусочки, которые вставить в ячейки таблиц. Получались довольно сложные структуры, которые еще и весили много, зато это отображалось примерно одинаково во всех браузерах. (На тот момент браузеры не так похоже отображали html. Иногда страницы, сверстаные для InternetExplorer совершенно невозможно было прочитать при помощи, скажем, Netscape.)

Но времена менялись. Сейчас настала эпоха CSS. Современные браузеры достаточно единодушно поддерживают эту спецификацию, чтобы можно было отказаться от таких анахронизмов, как верстка таблицами, теги <font> и атрибуты типа bgcolor. Настало время, когда разделение верстки и стиля стало реальностью.

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

Таблицы. Тег table.

Для того, чтобы задать таблицу, нужно поставить тег <table>. Этот тег контейнерный, он должен содержать внутри себя все, что относится к таблице и заканчиваться тегом </table>. В настоящее время есть только один атрибут, который может быть использован в теге table и который стоит рассматривать. Это атрибут cellspacing.

Атрибут cellspacing.

Этот атрибут определяет расстояние между соседними ячейками таблицы. Каждая ячейка — это прямоугольничек, у которого есть границы. Ставя эти прямоугольнички рядом, можно получить таблицу. Расстояние между ними, как раз определяется атрибутом cellspacing. Вообще-то, этот атрибут определяет внешний вид, а значит, должен присутствовать в CSS. Так и есть! Только InternetExplorer еще не понимает правило CSS, отвечающее за расстояние между ячейками. Поэтому его применение не имеет особого смысла. А атрибут cellspacing понимают все брауезры.

На врезке справа проиллюстрирована работа атрибута cellspacing. Это три таблицы, код которых абсолютно одинаков, за исключением значений атрибута cellspacing.

Строки в таблицах. Тег tr.

В html принята построчная модель описания таблиц. Что это значит? Все просто! Сначала мы объявляем таблицу. Потом мы объявляем строку таблицы, потом — ячейки этой строки. Если нам нужна новая строка, то мы заводим ее, а затем наполняем ее ячейками. То есть, описание таблицы идет сверху вниз, слева на право.

Для задания строк служит контейнерный тег <tr></tr>

Ячейки в таблицах. Тег td.

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

<table cellspacing="0px">
<tr>   <!--строка один-->
   <td>Левая верхняя ячейка</td>
   <td>Центральная верхняя ячейка</td>
   <td>Правая верхняя ячейка</td>
</tr>
<tr>   <!--строка два-->
   <td>Левая средняя ячейка</td>
   <td>Центральная средняя ячейка</td>
   <td>Правая средняя ячейка</td>
</tr>
<tr>   <!--строка три-->
   <td>Левая нижняя ячейка</td>
   <td>Центральная нижняя ячейка</td>
   <td>Правая нижняя ячейка</td>
</tr>
</table>

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

Объединение ячеек. Атрибут colspan.

Иногда нужно создавать таблицы, в которых число ячеек во всех строках не одинаково. Для этого используется атрибут colspan, который ставится в тег td и принимает численные безразмерные значения. Например: <td colspan="2"></td>.

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

<table cellspacing="0px">
<tr>
   <td colspan="3">Первая строка</td>
</tr>
<tr>   <!--строка один-->
   <td>Левая верхняя ячейка</td>
   <td>Центральная верхняя ячейка</td>
   <td>Правая верхняя ячейка</td>
</tr>
<tr>
   <td colspan="3">Вторая строка</td>
</tr>
<tr>   <!--строка два-->
   <td>Левая средняя ячейка</td>
   <td>Центральная средняя ячейка</td>
   <td>Правая средняя ячейка</td>
</tr>
<tr>
   <td colspan="3">Третья строка</td>
</tr>
<tr>   <!--строка три-->
   <td>Левая нижняя ячейка</td>
   <td>Центральная нижняя ячейка</td>
   <td>Правая нижняя ячейка</td>
</tr>
</table>

Теперь в нашей таблице появилось еще три строки, в которых все ячейки объединены в одну. Это происходит благодаря атрибуту colspan, который объединяет все три ячейки. Попробуйте скопировать этот код в браузер и поиграться со значениями атрибутов colspnan. Назначьте атрибуты colspan для других ячеек и посмотрите что будет.

Объединение столбцов. Атрибут rowspan.

Иногда нужно объединять не ячейки, а строки. Для этого нужен атрибут rowspan. Он действует аналогично colspan, но по-вертикали. Продемонстрируем его действие на простом примере.

<table cellspacing="0px">
<tr>
   <td rowspan="3">С<br/>Т<br/>Р<br/>О<br/>К<br/>И</td>
</tr>
<tr>   <!--строка один-->
   <td>Левая верхняя ячейка</td>
   <td>Центральная верхняя ячейка</td>
   <td>Правая верхняя ячейка</td>
</tr>
<tr>   <!--строка два-->
   <td>Левая средняя ячейка</td>
   <td>Центральная средняя ячейка</td>
   <td>Правая средняя ячейка</td>
</tr>
<tr>   <!--строка три-->
   <td>Левая нижняя ячейка</td>
   <td>Центральная нижняя ячейка</td>
   <td>Правая нижняя ячейка</td>
</tr>
</table>

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

Итог

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

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

Но всегда следует помнить, что основное назначение таблиц — представление табличной информации.

• С чего начать изучение html?
• Основы html. Общие правила. Блочные и строчные элементы.
• Основы html 2. Абзацы, списки, заголовки.
• Основы html 3. Таблицы.
• Основы html 4. Ссылки.
• Основы html 5. Формы.
• Основы html 6. Формы (продолжение).
• Основы html 7. textarea.

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