Создание страницы с табличным размещением информации. Применение пустых ячеек

На прошлом уроке мы с Вами создали файл главной страницы сайта index.html, открыли его блокнотом и добавили в него HTML код, содержащий обязательные html теги.

Кроме того, мы с Вами научились изменять цвет фона страницы с помощью изменения значения параметра bgcolor тега BODY.

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

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

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

На самом деле, существует два основных типа верстки страниц html сайтов – с помощью таблиц и с помощью CSS стилей.

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

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

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

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

Итак, таблица в коде веб страницы задается тегом

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

TD – создает новую ячейку в ряду. Закрывающий тег обязателен.

Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:

. Откроем файл нашей веб страницы index.html для редактирования блокнотом Notepad++. И откроем ее с помощью браузера, для того, чтобы просматривать на странице изменения. В самом начале этой статьи, мы с вами говорили о том, что макет сайта, который мы с Вами задумали, является таблицей. Причем, таблица макета сайта у нас будет состоять из трех строк (Heder, Контент и Footer) и двух столбцов (Меню и Контент). Для добавления таблицы с тремя строками и двумя столбцами, изменим наш код, добавив следующее: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Чтобы в таблице задать рамку, используем параметр border. Толщина рамки таблицы задается в пикселах (px). Добавим в наш html код параметр border, со значением аргумента, равным 1px. То есть, толщина рамки таблицы у нас будет равна одному пикселу: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Чтобы выровнять таблицу по центру окна браузера, используем параметр align, который может принимать три значения: left, center, right, понятно, что для выравнивания таблицы по центру окна браузера, значение аргумента параметра выравнивания, у нас должно быть равно: center. И давайте, здесь же, зададим ширину таблицы. Ширина таблицы задается параметром width. Значения, которые может принимать данный параметр, могут быть выражены целым числом в пикселах или в процентах от текущей ширины окна браузера. Добавим в наш код выравнивание и ширину таблицы, в результате, получим следующий код: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Обновляем окно браузера страницы нашего сайта, чтобы посмотреть изменения, мы видим, что таблица выровнялась по центру окна и изменила свою ширину. Теперь давайте вернемся к рамке таблицы, мы в html коде мы задали ее равной 1 пикселу с помощью значения аргумента параметра border: border=”1”. Вновь обратиться к параметрам тега TABLE в html справочнике, здесь есть два параметра, которые влияют на внешний вид рамки. Первый параметр: cellspacing – задает расстояние между ячейками таблицы. Второй параметр: cellpadding – от значения аргумента данного параметра, зависит расстояние от рамки до содержимого ячейки. Чтобы сделать все расстояния и отступы минимальными, зададим значения аргументов выше приведенных параметров равными нулю. В результате html код таблицы, примет следующий вид: 1строка 1 столбец 1строка 2 столбец 2строка 1 столбец 2строка 2 столбец 3строка 1 столбец 3строка 2 столбец Как Вы помните, наша таблица должна иметь три строки, причем в первой строке должна быть одна ячейка, во второй строке две ячейки и в третьей строке, должна быть тоже одна ячейка. Если мы посмотрим на внешний вид таблицы, то увидим, что для приведения таблицы к нужному виду, нам достаточно объединить горизонтальные ячейки первой и третьей строки. Для того, чтобы это сделать, воспользуемся параметром colspan. Данный параметр используется в теге TD. Значение аргумента параметра colspan, указывает на количество объединяемых горизонтальных ячеек, в нашем случае это значение равно 2. Кроме добавления параметра colspan, давайте изменим надписи в ячейках таблицы, в соответствии с нашим макетом. После всех изменений, полный html код нашей страницы будет следующим: Header Меню сайта Контент Footer Сохраним наш код в блокноте и обновим файл index.html в браузере, чтобы посмотреть на изменения. Итак, Данный урок получился достаточно большим, поэтому работу над htmlтаблицей нашей страницы, давайте продолжим в следующем уроке. Таблица - набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое. Для создания таблицы в HTML-документе используется тег , он представляет собой контейнер, в котором находится все содержимое таблицы. Создание таблицы всегда начинается со строк, которые определяются с помощью тега , каждая строка, в свою очередь, состоит из ячеек. Тег может содержать в себе только теги для создания ячеек. В HTML существует два разных тега для создания ячеек, первым из них является , он создает обычные ячейки с данными. По умолчанию, содержимое тегов выравнивается по левому краю. Второй тег для создания ячеек - это тег , он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным текстом и выравнивается по центру. Теги и могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа. Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 Попробовать » Таблица внутри таблицы В HTML есть возможность создания вложенных таблиц, то есть таких таблиц, которые расположены внутри других таблиц. Чтобы сделать вложенную таблицу надо код таблицы, которую требуется сделать вложенной, поместить внутрь любого тега . Для примера, возьмём уже созданную ранее нами таблицу и поместим этот код во вторую ячейку второй строки: Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 Первый заголовок Второй заголовок строка 1, ячейка 1 строка 1, ячейка 2 строка 2, ячейка 1 строка 2, ячейка 2 То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д. Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы: Итак, как в HTML сделать простую таблицу ? Для постройки таблицы необходимо использовать три тега: TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример. Закрывающий тег обязателен. Таблица состоит из ряда ряд 1 ряд 1 ряд 2 ряд 2 ряд 3 ряд 3 ячейка 1 ячейка 2 ячейка 1 ячейка 2 ячейка 1 ячейка 2 TR – создает новый ряд таблицы. Закрывающий тег

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2
ряд 3 ячейка 1	ряд 3 ячейка 2

Вот результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2
ряд 3 ячейка 1	ряд 3 ячейка 2

Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег

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

Закрываем ряд тегом .
Открываем другой ряд тегом
Закрываем ряд тегом .
Открываем третий ряд тегом и вставляем в него снова две ячейки.
Закрываем ряд тегом .
Закрываем таблицу тегом

ряд 1 ячейка1	ряд1 ячейка2

.

Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом

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

Посмотрите парочку примеров созданных таблиц и можно идти дальше:

ряд 1 ячейка 1

ряд 2 ячейка 1

Результат:

Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:

в строку между тегами вставить изображение.

ряд 1 ячейка 1

ряд 1 ячейка 2

Результат:

ряд 1 ячейка 1

ряд 1 ячейка 2

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

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.

объединяем ячейки в верхнем ряду с помощью атрибута colspan :

ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

Как установить размер таблицы?

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:

WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

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

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:

ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию) , center , right .
left - прижать содержимое к левой части;
center – установить по центру;
right - прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top , bottom , middle .
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

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

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

BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге

. А если только к определенной ячейке, тогда в тег

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега , определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan="2" .

Пример HTML таблицы с объединением ячеек

Исходный код таблицы HTML с объединенными ячейками

. Для лучшего понимания посмотрите пример: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах . В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 CELLSPACING –расстояние между границами соседних ячеек. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Фух, рассказал! Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы . А вам, рекомендую хорошо закрепить материал. Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html. Всего вам хорошего! Спасибо, что посетили мой блог Исходный код простой таблицы HTML Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8 Ячейка 9 Заголовки таблицы HTML В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега . Пример HTML таблицы с заголовком th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls-Royce Исходный код таблицы HTML с заголовками th Volkswagen AG Daimler AG BMW Group Audi Mercedes-Benz BMW Skoda Mercedes-AMG Mini Lamborghini Smart Rolls-Royce Объединение ячеек в таблице HTML В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали. Чтобы объединить ячейки по горизонтали используйте атрибут colspan="х " , у ячейки или , где x Чтобы объединить ячейки по вертикали используйте атрибут rowspan="х " , у ячейки или , где x - количество ячеек для объединения. Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Текст ячейки

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
	TEKNA	+
Nissan X-Trail	ACENTA	+
	CONNECTA	-

Колонтитулы и подпись в HTML таблицах

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

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

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

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег .

Пример HTML таблицы с колонтитулами и подписью

Исходный код таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

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

Теги и ставятся внутри тега перед тегами , АКП6 (EDC)

Трансмиссия

Исходный код таблицы HTML c и

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Таблицы в макете страниц сайта

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

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

Таблица - один из основных инструментов для создания web-страниц.

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

Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:

Рассмотрим нашу таблицу с точки зрения HTML:

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

Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:

Результат:

Как видите, получилось не очень красиво, будем украшать.

Параметры html таблиц: отступ, ширина, цвет фона, рамка

Для этого у тега

существует ряд параметров:

• width - задает ширину таблицы (в пикселах или % от ширины экрана),
• bgcolor - задает цвет фона ячеек таблицы,
• background - заливает фон таблицы рисунком,
• border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
• cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.

Применим эти параметры:

Результат:

Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:

• align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),
• cellspacing - задает расстояние между ячейками таблицы (в пикселах),
• cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).

Применим эти параметры:

Результат:

Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0" , то границы примут привычный вид:

Результат:

Вообще, за границы отвечают два параметра:

• frame - задает вид рамки вокруг таблицы и может принимать следующие значения:
  • void - рамки нет,
  • above - только верхняя рамка,
  • below - только нижняя рамка,
  • hsides - только верхняя и нижняя рамки,
  • vsides - только левая и правая рамки,
  • lhs - только левая рамка,
  • rhs - только правая рамка,
  • box - все четыре части рамки.
• rules - задает вид внутренних границ таблицы и может принимать следующие значения:
  • none - между ячейками нет границ,
  • groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
  • rows - границы только между строками,
  • cols - границы только между стобцами,
  • all - отображать все границы.

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

Результат:

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

HTML тэги tr и td

Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:

• align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
• valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
• bgcolor - задает цвет строки.

Посмотрим на примере:

• width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы),
• height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

Например, добавим в наш код, в теги

Результат:

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

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

эти параметры
1	2	3