HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны , а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
1. Как создать таблицу
Таблица создаётся при помощи парного тега
Рис.1. Внешний вид таблицы без форматирования css-свойствамиПо умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}
Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега
3. Как сделать ячейку заголовка столбца таблицы
4. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега
6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов 
Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
Элемент должен быть использован в следующем порядке: как дочерний элемент
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
| Атрибут | Описание, принимаемое значение | |||
|---|---|---|---|---|
| colspan | Количество ячеек в строке для объединения по горизонтали. | |
||
| headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. | ... | ... | |
| rowspan | Количество ячеек в столбце для объединения по вертикали. | Возможные значения: число от 1 до 999. |
||
| span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число. |
|||
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML
| Кухня | Холодные блюда | Горячие блюда | Десерты | ||
|---|---|---|---|---|---|
| Салаты | Закуски | Первые блюда | Вторые блюда | ||
| Русская | Винегрет | Язык с хреном | Щи с квашеной капустой | Вареники с картошкой | Печеные яблоки с медом |
| Оливье | Студень говяжий | Рассольник домашний | Караси запеченые в сметане | Блинчатый пирог | |
| Сельдь под "шубой" | Судак заливной | Мясная солянка | Котлеты "Пожарские" | Пирожное "Картошка" | |
| Испанская | Севиче из гребешков | Эмпанадас | Хлебный суп с чесноком | Паэлья с морепродуктами | Чуррос |
| Тимбал из авокадо и тунца | Ахотомате | Астурийская фабада | Свиное раксо | Альмойшавена | |
| Фасоль с ветчиной | Чанфайна | Рыбный суп с манными клецками | Тортилья картофельная | Бунуэлос | |
| Французская | Вогезский салат | Рийет из курицы | Баклажанный крем-суп "Ренуар" | Картофель огратен | Бриоши |
| Салат "Панзанелла" | Делисьез из сыра | Французский тыквенный суп | Гратин из птицы | Лигурийский лимонный пирог | |
| Тар-тар | Маринованный лосось | Суп "Конти" | Тартифлетт | Саварен "Триумф" | |
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- контейнер, внутри которого располагается таблица (такой же, как
- border - атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали). - тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри обозреватель выделяет жирным и размещает по центру. - контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег , столько ячеек в ней и будет: один тег - одна ячейка. .
используется для той же цели, что и , но не наоборот. - span - атрибут, задающий число столбцов, к которым применяются свойства контейнера
. - , и - контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и в HTML-документе.
- colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы Инструменты создания сайтов Назначение Инструмент Разметка HTML XHTML Оформление CSS Разработка PHP Python В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- открыли таблицу, задав ей толщину рамок.
- закрыли таблицу.- открыли строку. - закрыли строку. Аналогично создали остальные строки.Назначение - создали ячейку с оформлением заголовка.Инструмент - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.Разметка HTML XHTML
1. Что такое HTML таблицы и зачем они нужны?
html таблицы - это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги , задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
- строчка html таблицы
- столбец (ячейка) html таблицы. А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
- ячейка 1.1 - ячейка 1.2 - ячейка 1.3
- ячейка 2.1 - ячейка 2.2 - ячейка 2.3
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона" .
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
bgcolor="цвет_фона" >
- ячейка 1.1 - ячейка 1.2 - ячейка 1.3
- ячейка 2.1 - ячейка 2.2 - ячейка 2.3
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу
: bgcolor="#FFFF00" >
bgcolor="#0000FF" >
1.1
1.2
1.3
2.1
2.2
2.3
1.1 1.2 1.3 2.1 2.2 2.3 В этом случае, атрибут номер ячейки задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно . Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега
атрибут bgcolor="цвет_фона" : 4. Как установить размер ширины и высоты ячеек html таблицы?
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height - атрибут, устанавливающий высоту ячейки
width - атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах :
содержимое ячейки Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
5. Как выровнять текст внутри html таблицы?
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left” - выравнивает текст внутри html таблицы по левому краю
align=”center” - выравнивает текст html таблицы по центру
align=”right” - выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом
атрибут align принимать не может. Например, код html таблицы, текст которой выровнен по центру, выглядит так:
align="center" >
align="left" > 1x1
align="center" >1.2
align="right" > 1x3
align="left" >2.1
align="center" > 2x2
align="right" >2.3
Прописав атрибут align="center" в открытии
, мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
1x1 1.2 1x3 2.1 2x2 2.3 А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top" - содержание будет располагаться вверху ячейки
valign="middle" - содержание будет располагаться по центру ячейки
valign="bottom" - содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
valign="top" > 1x1
1.2
valign="top" > 1x3
valign="bottom" >2.1
2x2
valign="bottom" >2.3
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign :
1x1 1.2 1x3 2.1 2x2 2.3 6. Как объединить ячейки и столбцы html таблицы?
В этой части нашей статьи мы поговорим об атрибутах colspan и rowspan .
colspan - определяет количество столбцов, на которые распространяется данная ячейка
rowspan - определяет количество рядов на которые распространяется данная ячейка
Значения colspan и rowspan могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan , давайте разберемся с параметром rowspan. Принцип действия тут тот же:
colspan="2" > 1.1
1.2
2.1
2.2
1.1 1.2 2.1 2.2 Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях" - устанавливает ширину рамки
bordercolor="цвет рамки" - устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу
добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях" - отступ между ячейками
cellpadding="ширина отступа в пикселях" - отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
cellpadding="20" cellspacing="10" >
1.1
1.2
2.1
2.2
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing ) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
1.1 1.2 2.1 2.2 Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0" и cellspacing="0" .
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
1.1
3.1
3.2
2.1
2.2
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
1.1 3.1 3.2 2.1 2.2 На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
служит для создания таблицы.Атрибуты:
width - ширина таблицы в пикселях или в % относительно ширины окна браузера.
height - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендуют).
align - выравнивание таблицы.
left - выравнивание таблицы по левому краю.
right - выравнивание таблицы по правому краю.
center - выравнивание таблицы по центру.
border - толщина рамки таблицы в пикселях.
cellspacing - расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding - расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor - фоновый цвет таблицы.
background - фоновое изображение для таблицы.
bordercolor - цвет всех линий рамки таблицы.
Контейнер
Контейнер
Контейнер
Атрибуты
width - ширина ячейки в пикселях или в % относительно ширины окна браузера (для
не применяется). height - высота ячейки в пикселях или в % относительно ширины окна браузера (для
не применяется). align - выравнивание в ячейке.
left - выравнивание в ячейке по левому краю.
right - выравнивание в ячейке по правому краю.
center - выравнивание в ячейке по центру.
valign - вертикальное выравнивание содержимого ячейки.
top - выравнивание по верхнему краю ячейки.
bottom - выравнивание по нижнему краю ячейки.
middle - выравнивание по середине ячейки.
bgcolor - фоновый цвет ячейки.
background - фоновое изображение для ячейки.
bordercolor - цвет всех линий рамки ячейки.
colspan - количество объединяемых ячеек по столбцам (для
не применяется). rowspan - количество объединяемых ячеек по строкам (для
не применяется). Такой код:
Заголовок
Заг 1
Заг 2
Заг 3
1
2
3
4
5
6
Даст такой результат.
Задача
Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.
Решение
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег
. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и . Таблица должна содержать хотя бы одну ячейку (пример 1). Допускается вместо тега использовать тег . Текст в ячейке, оформленной с помощью тега , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги и нет. Пример 1. Создание таблицы
HTML5 IE Cr Op Sa Fx
Тег table Ячейка 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
Тег table Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4 Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
Рис. 2. Поля в ячейках таблицы
Статьи по темеЕще статьи из этой рубрики
