HTML: табличная верстка. Примеры, описание, применение, советы
Табличная вёрстка.
Таблицы, которые первоначально проектировались как средство представления двумерных массивов данных, сейчас используются в основном как инструмент для точного позиционирования контента на веб-странице. Стандарт HTML не предусматривает возможности расположить картинки и текст относительно друг друга с приемлемой точностью, а табличная вёрстка, при которой различные части контента помещаются в разные ячейки таблиц, способна решить эту проблему. Кроме того, табличная вёрстка очень полезна при проектировании сайтов с большим количеством графических элементов: в больших рисунках почти всегда можно выделить области, закрашенные одним и тем же цветом, которые можно выбросить, заменив на пустые ячейки с соответствующим фоном и сэкономив таким образом на общем «весе» графики и времени загрузки страниц. Это, конечно же, не единственное преимущество упомянутого способа вёрстки. К недостатками же его можно отнести тот факт, что некоторые браузеры (не будем показывать пальцем) не в состоянии отобразить на экране уже загруженные части помещённого в таблицу контента до тех пор, пока не загрузится вся таблица целиком. Они же (упомянутые браузеры) почему-то очень медленно работают со вложенными таблицами. А потому скажем дружно, что Нетскейп есть не что иное как дрянь, мерзость и порождение Сатаны. Несогласных попрошу удалиться.
Чтобы понять, как именно нужно «нарезать» контент для помещения в таблицы и как проектируются сами таблицы, достаточно просмотреть исходный код нескольких профессионально сделанных сайтов и попробовать сделать что-то подобное самостоятельно, поэтому я не стану подробно разбирать эту тему. Остановлюсь лишь на двух наиболее распространённых техниках оформления таблиц, позволяющих справиться с недостатками стандартного HTML и проблемами, возникающими при обеспечении совместимости с различными браузерами.
Применение фоновых рисунков
Иногда дизайнер испытывает непреодолимое желание использовать в качестве фона таблицы некий рисунок. Не будем сейчас говорить о том, хорошо это или плохо. Ему так захотелось.
И вот картинка подготовлена, оптимизирована и прописана в параметре background. Счастливый разработчик решает для проверки запустить Нетскейп, чтобы убедиться, так ли всё прекрасно выглядит, как уверял Internet Explorer. Не тут-то было!
Проблема заключается в том, при просмотре страницы в разных браузерах ячейки по-разному наследуют фон таблицы. Internet Explorer рассматривает каждый контейнер
Для того, чтобы справиться с этой проблемой, приходится использовать вложенные таблицы. Во внешней прописывается адрес фоновой картинки, а во внутренней в качестве фона указывается пустой URL:
|
|
|||
Пустой атрибут background внутренней таблицы заставляет Нетскейп не отображать в ней фон, указанный во внешней. Кто-нибудь знает, кто именно писал соответствующий кусок кода для Нетскейпа? Скажите мне, я очень хочу увидеть честные глаза этого человека.
Создание таблиц с бордюром в 1 пиксел
Создадим простейшую таблицу с бордюром в один пиксел, содержащую всего одну ячейку. Вот код:
Видно, что толщина бордюра почему-то равно двум пикселам. К сожалению, более-менее приличного способа борьбы с этой глупостью пока не придумали, а потому приходится делать всё по-дурацки. Но работать будет. Вот таблица с бордюром толщиной в один пиксел:
|
|
Как вы можете заметить, задача опять решается при помощи вложенных таблиц. В данном случае для внешней таблицы задан чёрный фон и параметр cellpadding установлен в единицу при нулевом бордюре, т. е. то, что мы видим, на самом деле не бордюр, а краешек фона.
Всякие разности
В завершение разговора о таблицах сформулирую несколько правил, которых стоит придерживаться во время разработки дизайна, основанного на табличной вёрстке.
1. Указывайте ВСЕ размеры таблиц и составляющих их ячеек.
Width и height должны быть жёстко заданы как для самой таблицы, так и для ячеек, которые её составляют. Этого принципа лучше придерживаться с первого же дня. Поверьте на слово: когда вы верстаете более-менее сложную страницу хотя бы с десятком-другим картинок, лучше сразу указать все размеры, иначе потом придётся долго и нудно ползать по коду, пытаясь определить, какая же именно ячейка заставляет «уехать» весь дизайн. Кстати, это относится и ко всем картинкам, помещаемым в таблицы.
2. По возможности указывайте все размеры в пикселах, а не в процентах
Если вы используете «резиновый» дизайн, от этого правила иногда можно отступать, и то только в тех случаях, когда вы задаёте, скажем, ширину колонок, которые в сумме должны занимать весь экран. Помните, что при масштабировании документа или даже при обычном изменении окна браузера ваши проценты могут принять самые неожиданные значения, и дизайн развалится.
3. Используйте распорки.
Наш любимые Нетскейп никогда не упускает возможности пошутить. Если дизайнер создаёт ячейку таблицы, даже задаёт её размеры, но не помещает туда контент (либо контент не занимает всю ячейку), Нетскейп считает себя вправе поступать с размерами ячейки как заблагорассудится, а иногда и вовсе «схлопывает» её. Чтобы избежать этой беды, создайте прозрачную картинку формата.gif размером 1х1 пиксел и вставляйте её в пустые ячейки, указывая соответствующий размер. Благодаря такой «распорке» таблицы будут выглядеть так, как задумано.
4. Указывайте нулевую толщину бордюра для всех картинок в таблице.
6. Разрывайте теги.
Если поставить рядом две картинки и написать тег img для каждой из них в отдельной строчке, получится вот что:
А всё потому, что мы сделали вот так:
Теперь попробуем разорвать один из тегов:
В результате получаем совсем другую картину:
А всё потому, что браузер воспринимает перенос строки и пробел одинаково: для него это whitespace, в простейшем случае — пробел. Вот он и ставит пробел между двумя картинками.
Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки
Как заявлено в названии верстка бывает блочная или табличная . В блочной верстке элементы сайта структурируются с помощью блоков (div ), в табличной верстке обходятся таблицами (table ).Табличная верстка
Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
| шапка | |
| контент | сайдбар |
| футер | |
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
- Проста в понимании, не требует более глубоких знаний HTML и CSS (+ )
- Интуитивно понятна при построении, минимум CSS правил (+ )
- Трудно разбираться в HTML коде при более сложной структуре сайта (- )
- Пока вся таблица не загрузиться она не будет показана на экране (- )
- Сложный дизайн с перекрытием элементов не реализуем (- )
- Много лишнего кода (- )
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit ). Если блоку указать свойство float:left , то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block , изначально только элементы div по умолчанию считаются блочными элементами, для не блочных элементов (span, p ) свойство float игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float не игнорировалось необходимо задать элементы свойство display:block .float:right выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both . Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit - задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left , чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left , но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both ;
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
- Меньший вес страницы за счет меньшего кода (+ )
- Реализация сложного дизайна с перекрывающимися блоками (+ )
- Трудно освоить, табличная верстка проще (- )
- Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (- )
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
Как запустить видеоурок:
- Разархивировать скачанный файл.
- Открыть папку index .
- Запустить файл index.html в браузере.
Добро пожаловать в видеоурок, посвященный табличной верстке сайта. Изучив 12 урок по , Вы уже должны уметь работать с . Сейчас же, мы познакомимся с табличной версткой. Наш сайт будет основан на большой таблице. Сверху у нас будет шапка сайта (наверняка вы уже видели такие сайты). Там будет располагаться логотип и еще что-нибудь. Внизу будет футер. Там будут и годы жизни сайта. Слева – меню, справа – контент.
Как сверстать сайт? (Табличная верстка)
Давайте перейдем на рабочий стол и создадим еще одну папку. Папка будет называться site2. Поместим в нее два изображения, которые я подготовил для этого видеоурока: footer.png и logo.png . Также давайте скопируем файл index.html из папки site в папку site2 . Чтобы скопировать, вы можете нажать правой клавишей мыши на файле и выбрать «копировать» либо использовать комбинацию горячих клавиш Ctrl+C. Чтобы вставить, можно нажать правой клавишей мыши и выбрать «Вставить» либо использовать Ctrl+V.
Теперь давайте откроем наш индексный файл через notepad, удалим все лишнее и ненужное нам, начиная с первой строки, размещенной в тегах .
Теперь создадим нашу таблицу. Пропишем ей ширину в 800 пикселей. Можно прописать и в процентах: 100%, 90%, 80% — на ваше усмотрение. Я прописываю 800 пикселей, так как наш логотип будет шириной в 800 пикселей. Далее прописываем первую строку – это будет шапка сайта. Насколько мы помним, после шапки сайта идет меню и контент, то есть два столбца. Поэтому нам сейчас надо прописать один столбец для нашей шапки и, с помощью атрибута colspan разбить его на два. В первую строку помещаем наше изображение. Так как изображение находится в корневой папке, то путь прописываем просто “logo.png ”. Зададим ширину изображения 800 пикселей и высоту – 100 пикселей. Кстати, нашей строке мы тоже можем задать ширину и высоту. Но ширину нет смысла задавать, так как она у нас задана уже в таблице. Зададим просто высоту.
 |
Теперь давайте создадим вторую строку. Это меню и контент. У нас здесь будет два столбца. Мы их оба пропишем. Сначала первый. Это меню. В ссылке я прописываю решетку. Это значит, что наша ссылка никуда не будет нас перенаправлять при нажатии на нее – оставит нас на нашей же странице. Вставим для наглядности несколько ссылок.
Кстати, нам нужно задать для левого блока «Меню» ширину. Пусть будет 200 пикселей. Для второго блока ширину можно не задавать.
Теперь займемся контентом. Пишем в нем любой текст. Ширину поставим 600.
Читайте наши новости каждый день и получите подарок от автора.
И создаем последнюю нашу строку – футер. Зададим ему высоту 20 пикселей, атрибут colspan =2 и пропишем путь до изображения footer.png . Не забудьте положить все изображения, которые я добавил к этому видеоуроку в корневую папку сайта, иначе они у вас не отобразятся. Либо вы можете положить их в любую другую папку и указать к ней путь. Только учтите, что придется указывать этот путь перед указанием имени самого изображения. Установим изображению высоту 20 пикселей и ширину 800 пикселей.
Всё. Сохраняем и проверяем в браузере. Как мы видим, у нас табличная верстка получилась. Давайте создадим рамку, чтобы разделить блоки.
Переходим в код, прописываем таблице рамку.
|
Меню:
|
Добро пожаловать на наш сайт.
| |||||||||||||||||||||||
Загрузка...
