Табличный САЙТ в HTML

САЙТ из таблиц!

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

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

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

Применил для пробы вёрстки табличного сайта свою ВНУТРЕННЮЮ таблицу стилей CSS.
Расположил её НЕ в тэгах <head></head>, а в "теле" документа, т.е. между тэгами <body></body>. Поэтому её нужно прописывать, как можно ВЫШЕ по коду. Иначе браузер начинает вести себя "неадекватно"!


        Важно! P.S.  Для всей страницы использовал свою, отдельную таблицу стилей, которую, на всякий случай, я прописал именно в тэгах head.
Она закомментирована спецсимволами HTML: <!--   --> НО! Браузер реагирует именно на неё, даже несмотря на то, что в самом начале кода как обычно указан отдельный, общий (главный) файл CSS для всего сайта.
Получилось так, что он, как прописанный ВЫШЕ, стал иметь меньший приоритет перед тем, что указано НИЖЕ по коду.
Таким образом вышло, что у данной страницы целых 3 таблицы стилей!

* * *

Здесь, сразу после этого абзаца, и идёт тот самый, пробный код CSS.

* * *

А вот теперь идёт уже сама табличная вёрстка сайта.

Шапка сайта

Это левая ячейка. Ниже в ней идёт встроенная таблица.

Текстовой контент во внутренней таблице левой ячейки сайта.

Первый абзац в ячейке этой таблицы.

Второй абзац. Можно дальше писать, что угодно, в левой части табличного сайта.

Третий. Можно и здесь писать, и вставлять рисунки в левую часть сайта.

Аналогично. Четвёртый абзац, и тоже с рисунком галочки.

Пятый пробный абзац.

Шестой, и последний абзац. Он также с рисунком галочки.

Это правая ячейка. И в ней тоже ниже идёт встроенная таблица.

Пример контента в правой части сайта - во встроенной в правую ячейку таблице.

Абзац с отступом. Это пример текстового контента в правой части (ячейке) табличного сайта.

Можно здесь много чего писать и писать. Будет отображаться рядом с вставленным рисунком.

У рисунка прописан атрибут align="left". Все абзацы его "обтекают" слева.

* * *

Можно ещё здесь, в правой части писать и писать. Можно много чего разного ещё понаписать.

Жирный абзац. А здесь осталось немного пустого места в ячейке под правой таблицей.

Это футер

Проба вёрстки сайта ТАБЛИЧНЫМ МЕТОДОМ
закончена успешно!

Выводы

О встроенных таблицах стилей.
Хоть их и НЕ видно в браузере, однако они занимают ОЧЕНЬ большое место, и, честно говоря, "замусоривают" код страницы. Всё-таки лучше выносить их в отдельный файл.

Важно! НЕ прописывать у тэга встроенных таблиц атрибут align="left" или "right".  Иначе, следующий за таблицей элемент будет "утекать" под неё.

Так было с жирным абзацем.   Причём, "прятал" его (под картинку), т.е. вполне адекватно реагировал, только IE8.   Остальные же браузеры, в нарушение логики HTML, всё-таки абзац показывали ... ... .

Очень важно! Чрезвычайно ВАЖНО! Обязательно прописать ПОЛНУЮ(!) служебную шапку <! DOCTYPE.  В которой указать, где браузеру брать эту спецификацию HTML.

Иначе, он НЕ будет реагировать на свойства:  max-width   и   min-width,  а в результате станет "растягивать" сайт на весь экран ЛЮБОГО монитора.
Мониторы же - у всех разные ... ... .



Назад

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика