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

Кроме этого в первых статьях, посвященных верстке сайта (), были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах.

Какие проблемы возникли с нашим макетом сайта

Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.

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

Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

А в файле Style.css были прописаны следующие CSS свойства:

Body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }

Ну, а сам макет выглядел примерно так:

Как видите, футер не прижат к низу и, следовательно, не удовлетворяет нашим требованиям (он располагается всегда под самой нижней колонкой), поэтому придется внести коррективы в код. Все тоже самое можно будет проделать и для двухколоночного, и для резинового макета тоже. Метод универсальный.

Как прижать футер к низу макета сайта

Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

Body, html { margin:0px; padding:0px; height: 100%; }

На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.

Основные свойства CSS, при желании, вы можете посмотреть . Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border ():

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{ background-color:#FFC0FF; clear:both; height: 50px; }

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

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

Вставляем распорку и боремся с Internet Explorer

Но возникает проблема , которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки ) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID () с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

А в Style.css пропишем для этого ( , задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka { height: 50px; }

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

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.

Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что ( не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

* html #maket { height: 100%; }

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

Body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Блочная верстка - Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
DiV верстка - Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

09.11.2015

Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML . А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:

…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с . Я частенько использую таблицу на своем блоге или на сайте, вот например, как в .

Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.

Из каких основных тегов состоит таблица?

○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.

○ тег T R

Внутри контейнера

…… размещаются ряды:

Столбики создаются с помощью тега .
Закрывающий тег обязателен.

Внимание: без использования всех этих тегов таблицу создать не возможно.

Теперь попробуем воспользоваться теорией и создадим таблицу на практике.

Задание: создать таблицу из одного ряда, где будет три столбика.

ряд -1 /столбик 1

столбик 2

столбик 3

Задание: создать таблицу из трех рядов и трех столбиков.

ряд -1 /столбик 1	столбик 2	столбик 3
ряд -2 /столбик 1	столбик 2	столбик 3
ряд -3 /столбик 1	столбик 2	столбик 3

До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.

Теперь рассмотрим атрибуты для таблицы.

*Атрибуты

○ Границы таблицы в HTML

Чтобы была видна таблица, к тегу

применяется атрибут « border » .

Если значение атрибута « border » «0» , границы видно не будет, если не прописать к тегу

атрибут «border» , граница в таблице тоже видна не будет.

ряд -1 /столбик 1

столбик 2

столбик 3

Результат:

Попробуйте поменять значение в атрибуте «border» на «10» .

○ Как объединить ячейки в таблице

Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу < td > .

• colspan - объединение ячеек по горизонтали;
• rowspan - объединение ячеек по вертикали.

В значениях указываете, сколько нужно объединить ячеек.

ряд 1 столбик 1
ряд 2 столбик 1	ряд 2 столбик 2

Результат:

ряд 1 столбик 1	ряд 1 столбик 2
	ряд 2 столбик 1

Результат:

Более сложный пример:

ряд -1 /столбик 1	столбик 2			столбик 3
ряд -2 /столбик 1	столбик 2	столбик 3	столбик 4

Результат:

○ Как увеличить расстояние между ячейками таблицы

Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу

В значениях у атрибута «cellpadding» указываете расстояние отступа

ряд 1 столбик 1

столбик 2

Результат:

Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу

В значениях у атрибута «cellspacing» указываете расстояние между ячейками

ряд 1 столбик 1

столбик 2

Результат:

○ Как сделать фон таблицы HTML

Чтобы сделать фон таблицы HTML используют к тегу

и

такие атрибуты: BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом. BACKGROUND –фон в таблице заполняется рисунком. ряд -1 /столбик 1 столбик 2 столбик 3 ряд -2 /столбик 1 столбик 2 столбик 3 столбик 4 Результат: ○ Как вставить картинку в таблицу HTML Чтобы вставить картинку в таблицу HTML, между тегом

вставляться тег .

ряд 1 ячейка 1

ячейка 2

Результат:

Значения задаются в пикселях (px) или в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу атрибут «align» и «valign» :

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

• left - прижать содержимое к левой части (по умолчанию) ;
• center – установить по центру;
• right - прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

• top – прижать содержимое к верху;
• bottom – прижать содержимое к низу;
• middle – установить содержимое посередине

текст

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

Результат:

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом

:

Код таблицы

ряд -1 /столбик 1

столбик 2

столбик 3

Дополнительные и основные теги к таблице

Таблица для сайт

Название 1	Название 2
1	2

Результат:

Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.

Предыдущая запись
Следующая запись

Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

• - контейнер, внутри которого располагается таблица (такой же, как
  для маркированных или
  для нумерованных списков).
  1. border - атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  и . Текст, размещенный между тегами , не наследует этот стиль, поскольку тег , ни тега .

  Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align для псевдокласса td:nth-child(n) , где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .

  Пример

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

  - парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).

  , столько ячеек в ней и будет: один тег - одна ячейка.

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

  Проще всего понять, как можно использовать группировку строк и столбцов на примере таблицы Судоку .

  Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:

  или

  Пример

  , если его нет, то после .

  используется для той же цели, что и . может содержать , но не наоборот.

  span - атрибут, задающий число столбцов, к которым применяются свойства контейнера

  .

  , и - контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и

  Инструменты создания сайтов

  Назначение	Инструмент
Разметка	HTML	XHTML
Оформление	CSS
Разработка	PHP	Python

  В браузере документ будет выглядеть так:

  Разберём, какие строчки кода за что отвечают.

  • - открыли таблицу, задав ей толщину рамок.
    - озаглавили её.
    - открыли строку.
    - создали ячейку с оформлением заголовка.
    - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
    - закрыли строку. Аналогично создали остальные строки.
    - добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.

    Инструменты создания сайтов

    Назначение	Инструмент
  Разметка	HTML	XHTML

    - закрыли таблицу.

  Таблица c рамками

  Имя	Фамилия
Лариса	Исаева
Дмитрий	Колесников

  РЕЗУЛЬТАТ:

  Таблица без рамок

  Таблица c рамками

  Атрибуты тегов

  - тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри	обозреватель выделяет жирным и размещает по центру.	- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
и	для объединения ячеек Пример хорьки вес размер самцы 1.2 – 2.5 кг до 70см самки 0.7 – 1.0 кг до 40см РЕЗУЛЬТАТ: хорьки вес размер самцы 1.2 – 2.5 кг до 70см самки 0.7 – 1.0 кг до 40см По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border , cellspacing , cellpadding и др. больше не поддерживаются и их использование валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц . Например, вместо атрибута cellspacing для изменения расстояния между ячейками таблицы используется свойство border-spacing , а для выравнивания содержимого в ячейках таблицы – свойства text-align и vertical-aling . CSS-стили для оформления таблиц Теги группирования строк html таблицы Для создания более сложных таблиц можно использовать теги: Пример Потребление пива Ф.И.О. литров Итого 250 Иванов Иван Иванович 133 Петров Петр Петрович 117 РЕЗУЛЬТАТ: Теги группирования столбцов html таблицы Атрибут тегов

  желтый		красный

  РЕЗУЛЬТАТ:

  Не пытайтесь установить стиль text-align для тегов

  ...	не является потомком ни тега

  Наименование	Цена (руб.)
  Поминутная оплата солярия (от 4 минут)	15
  50 минут солярия (14 руб/мин, 1 мес.)	700
  100 минут солярия (13 руб/мин, 2 мес.)	1300
  200 минут солярия (12 руб/мин, 3 мес.)	2400

  РЕЗУЛЬТАТ:

  
  

  Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan .

  
  
  
  Тег colspan - объединение столбцов

  Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:

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

  Например,

  Этот столбец включает в себя два столбца.

  Для нашего примера:

  Заголовок документа

  шапка сайта
  меню	контент
  низ сайта

  Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.

  Рассмотрим другой пример разметки web-страницы:

  шапка сайта
  меню	меню	меню	меню	меню	меню
  новости		контент

  Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.

  Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:

  шапка сайта

  Вторая строка состоит из шести столбцов:

  меню меню меню меню меню меню

  Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:

  новости контент

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

  Тег rowspan - объединение строк

  А если нам понадобится вот такая разметка?

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

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

  Рассмотрим еще один пример:

  шапка	меню
  контент
  низ сайта

  Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:

  шапка меню

  Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):

  контент

  Наконец, третья строка - это один столбец, включающий в себя три столбца:

  низ сайта

  Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.

  Вложенные таблицы

  Как следует из названия одну таблицу можно поместить внутрь другой, а имеено внутрь любого столбца. Сделаем это на примере нашей последней разметки.

  Итак, у нас есть вот такой код.