То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:

Итак, как в HTML сделать простую таблицу ?
Для постройки таблицы необходимо использовать три тега:

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

Таблица состоит из ряда

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

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

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

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

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

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

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

Результат:

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

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

ряд 1 ячейка 1

ряд 1 ячейка 2

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

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

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

Пример

. Для лучшего понимания посмотрите пример: ряд 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. Всего вам хорошего! Спасибо, что посетили мой блог Задача Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили. Решение Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег . Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов и и Проще всего понять, как можно использовать группировку строк и столбцов на примере таблицы Судоку . Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде: или Пример . Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 1. Создание таблицы HTML5 IE Cr Op Sa Fx Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 1. Рис. 1. Результат создания таблицы с четырьмя ячейками Атрибут border тега допустимо добавлять только с пустым значением ( ) или равным 1. Все остальные значения не проходят валидацию. Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0. Пример 2. Поля внутри ячеек HTML5 CSS 2.1 IE Cr Op Sa Fx Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек. Рис. 2. Поля в ячейках таблицы Таблица 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 .

Л юбая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.

Элемент TABLE, создаем таблицу

Для создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:

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

Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:

bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

Добавляем строку

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

bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

Добавляем ячейки

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

bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

Ячейка №1
Ячейка №2
Ячейка №3

В увидим получившуюся таблицу:

Объединение строк

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

bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

rowspan="2" >Строки №1 и №2 объединены
Ячейка№1
Ячейка№2

Ячейка №3
Ячейка №4

Строка №3
Ячейка №5
Ячейка №6

Браузер отобразит:

Строки №1 и №2 объединены	Ячейка№1	Ячейка№2
	Ячейка №3	Ячейка №4
Строка №3	Ячейка №5	Ячейка №6

Объединение столбцов

Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:

bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

colspan="2" >Столбцы №1 и №2 объединены
Столбец №3

Ячейка №1
Ячейка №2
Ячейка №3

Ячейка №4
Ячейка №5
Ячейка №6

Браузер отобразит:

Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:

Или вот так:

А ты попробуй написать код самостоятельно!

Размеры и выравнивание таблицы

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

Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения - вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).

Фон таблицы

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

В заключение

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

/ То, без чего не создать сайт: ∼ ∼

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

Результат:

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

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