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

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

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

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

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

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


        P.S.  Для главной страницы использовал свою, отдельную таблицу стилей, которую, на всякий случай, прописал именно в тэгах head.

* * *

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

* * *

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

Шапка сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

* * *

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

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

Это футер

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

Выводы

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

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

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

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

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



Назад

ВВЕРХ

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

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru