Табличный дизайн для сайта — быстро и просто!

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

Что же представляет собой такой внешний вид? Табличный дизайн, значит основан на таблицах, следовательно, вся страница должна состоять из таблиц и их ячеек. Вся суть в том, что по умолчанию границы таблиц не показываются, такое возможно, если только включить толщину рамок параметром border. Нужно подогнать таблицу под материал, а затем просто вставить содержимое. Чтобы создать таблицу, нужно вписать парный тег <TABLE> в код. Если желаем, прописываем заголовок при помощи парного тега <CAPTION>. Итак, пришло время создания строк и столбцов. Используя парный тег <TR>, создаем строки таблицы, а теги <TH> и <TD> создают уже ячейки в строках. Да и еще — содержимое нужно указывать только в тегах <TH> и <TD>, иначе оно просто не будет рассматриваться. Если даже нужна таблица с одним столбцом, все равно нужно написать соответствующий тег. Вот такой код создает простую таблицу с заголовком : <TABLE>

<CAPTION>Простая таблица 2×2</CAPTION>

<TH>столбец 1</TH> <TH>столбец 2</TH>

<TD>ячейка 1</TD> <TD>ячейка 2</TD> </TABLE>. Есть еще одна полезная функция — объединение ячеек. В этом случае будем применять атрибуты COLSPAN и ROWSPAN. Первый соединяет по горизонтали, другой по вертикали. Например, давайте соединим две ячейки по горизонтали. Итак, добавляем атрибут и указываем количество ячеек. Затем удаляем то же количество существующих ячеек в той же строке. Итог — <TD COLSPAN="2"> ячейка 1 и 2</TD>. Далее удаляем следующую ячейку и получаем одну, но размером с двух. Тоже самое с вертикальным объединением, только пишем атрибут ROWSPAN и стираем уже не следующую, а нижнюю ячейку, которая находится точно под первой.

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


2 комментария к “Табличный дизайн для сайта — быстро и просто!”

  • 15 октября, 2014, 23:50
    Цитировать

    Создание страницы в табличном предполагает использование чистого html или есть варианты?

  • 27 ноября, 2015, 18:24
    Цитировать

    Боже! Как всё сложно. Самим хоть понятно? :razz:

Оставить комментарий или два

Я не робот!

Оповещать о новых комментариях по RSS