При создании таблиц в HTML иногда необходимо объединить ячейки по горизонтали.

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

Для HTML объединения ячеек необходимо добавить в строку меньше ячеек, чем в остальные строки и добавить атрибут colspan=» « внутри тега ячейки, которую необходимо растянуть.

Рассмотрим простой пример HTML-таблицы с двумя строками и двумя столбцами (четыре ячейки ). Ее HTML-код выглядит следующим образом:

содержимое	содержимое
содержимое	содержимое

содержимое
содержимое	содержимое

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

Можно осуществить объединение ячеек таблицы HTML в любой ее области с любым количеством столбцов. Одним из наиболее полезных применений объединения ячеек по горизонтали является создание заголовков таблицы. Если таблица имеет n столбцов, поместите атрибут colspan=»n» в первую ячейку верхнего ряда и удалите другие ячейки из этого ряда.

Как объединить ячейки в HTML-таблице по вертикали: rowspan

Атрибут rowspan=» » позволяет объединять ячейки по вертикали

Если нужно, чтобы ячейка охватывала несколько строк, следует добавить атрибут rowspan=» « внутри тега той ячейки, которую необходимо растянуть по вертикали. В каждой строке под строкой, где начинается растянутая ячейка, нужно удалить одну ячейку, чтобы таблица была выровнена. Например, когда вы растягиваете ячейку на три строки, необходимо удалить по одной ячейке в следующих двух строках.

Рассмотрим простой пример HTML-таблицы с четырьмя ячейками, разделенными на две строки и два столбца. HTML-код :

содержимое	содержимое
содержимое	содержимое

Чтобы осуществить HTML table объединение ячеек по вертикали, добавьте для первой ячейки верхней строки атрибут rowspan=»2″ , а затем удалите одну из ячеек в нижнем ряду. HTML-код теперь будет выглядеть следующим образом:

stuff	содержимое
	содержимое

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

Способы комбинирования rowspan и colspan для создания пользовательских HTML-таблиц с ячейками, которые охватывают несколько строк и столбцов

span 3 rows	span 3 columns
	H	T	span 2 rows
	M	L
span 4 columns

span 2 rows and 2 columns		T
		A
E	L	B

Использование вертикально объединенных ячеек

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

Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример - простую таблицу, HTML-код которой приведен в листинге 5.10.

Листинг 5.10

Это обычная таблица, ячейки которой пронумерованы - так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.

А теперь рассмотрим таблицу на рис. 5.3.

Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?

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

Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению

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

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

1. Найти в коде HTML тег

Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.

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

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

2. Найти в коде этой строки тег

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

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. Как сделать ячейку тела таблицы

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

5. Как добавить подпись (заголовок) к таблице

Создает подпись таблицы. Добавляется непосредственно после тега

6. Группирование строк и столбцов таблицы

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

7. Группировка разделов таблицы

Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами

и для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент

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

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

и .

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.


Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы

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

Атрибут	Описание, принимаемое значение
colspan	Количество ячеек в строке для объединения по горизонтали.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.	...	...
rowspan	Количество ячеек в столбце для объединения по вертикали.	Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

10. Пример создания таблицы


Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Меню ресторана "Ромашка"

Кухня	Холодные блюда		Горячие блюда		Десерты
	Салаты	Закуски	Первые блюда	Вторые блюда
Русская	Винегрет	Язык с хреном	Щи с квашеной капустой	Вареники с картошкой	Печеные яблоки с медом
	Оливье	Студень говяжий	Рассольник домашний	Караси запеченые в сметане	Блинчатый пирог
	Сельдь под "шубой"	Судак заливной	Мясная солянка	Котлеты "Пожарские"	Пирожное "Картошка"
Испанская	Севиче из гребешков	Эмпанадас	Хлебный суп с чесноком	Паэлья с морепродуктами	Чуррос
	Тимбал из авокадо и тунца	Ахотомате	Астурийская фабада	Свиное раксо	Альмойшавена
	Фасоль с ветчиной	Чанфайна	Рыбный суп с манными клецками	Тортилья картофельная	Бунуэлос
Французская	Вогезский салат	Рийет из курицы	Баклажанный крем-суп "Ренуар"	Картофель огратен	Бриоши
	Салат "Панзанелла"	Делисьез из сыра	Французский тыквенный суп	Гратин из птицы	Лигурийский лимонный пирог
	Тар-тар	Маринованный лосось	Суп "Конти"	Тартифлетт	Саварен "Триумф"

body { margin: 0; background: #F4F1F8; } table { border-collapse: collapse; line-height: 1.1; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8); color: #0C213B; } caption { font-family: annabelle, cursive; font-weight: bold; font-size: 2em; padding: 10px; color: #F3CD26; text-shadow: 1px 1px 0 rgba(0,0,0,.3); } caption:before, caption:after { content: "\274B"; color: #A9E2CC; margin: 0 10px; } th { padding: 10px; border: 1px solid #A9E2CC; } td { font-size: 0.8em; padding: 5px 7px; border: 1px solid #A9E2CC; } .first { font-size: 1em; font-weight: bold; text-align: center; }

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

Создание таблицы

Рассмотрим, как создать таблицу в HTML. Это делается с помощью тэга

. Таблицы состоят из строк, внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг добавляет в таблицу строку, а тэг

добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу: Для того, чтобы были видны рамки таблицы, тэгу был задан атрибут border , но в HTML5 этот атрибут считается устаревшим, и использование его не желательно. Кроме того, есть и другие атрибуты для работы с рамками и изменения фона, а так же у ячеек есть атрибуты для выравнивания контента. Все эти атрибуты также нежелательны, вместо них нужно использовать стили. Объединение ячеек таблицы Есть возможность объединить ячейки таблицы в одну. Для этого у тэга есть атрибут colspan , который объединяет ячейки внутри одной строки, а также атрибут rowspan , который объединяет ячейки из разных строк. Значением этих атрибутов является количество объединяемых ячеек. Создадим такую таблицу: Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек, поэтому общее количество ячеек в этой строке будет меньше, чем в других, в данном случае, одна. Теперь создадим такую таблицу: Дополнительные табличные тэги Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы. - заголовочная ячейка. Обычно находятся в первой строке таблицы. Используются для создания названия колонки таблицы. От тэга отличается только жирным шрифтом и выравниванием по центру. - находится внутри тэга , добавляет заголовок таблицы. - cодержит несколько первых строк таблицы для указания особого стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с самой первой строки. - содержит несколько строк таблицы для указания особого стиля. Таких тегов в таблице может быть несколько. - содержит строки таблицы, которые отобразятся в самом низу таблицы. - определяет стиль для одной колонки таблицы, начиная с первой. То есть первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает по-разному в разных браузерах. Урок 11. Объединение ячеек таблицы. В этом уроке продолжаем изучать таблицы, а именно мы рассмотрим еще два атрибута для тега <td> , которые отвечают за объединение ячеек. Посмотрев на рисунок ниже, Вы поймете о каком объединении пойдет речь. Таблица изображенная слева, имеет обычную структуру. У правой таблицы в первой строке две ячейки объединены между собой, образуя одну большую ячейку. Применение этих атрибутов немного сложнее, чем применение других. Именно по этому им отведен отдельный урок. Атрибут colspan. Атрибут colspan используется для объединения ячеек по горизонтали. В значении атрибута указывается число ячеек объединяемых в одну. Внимание! Очень важно, чтобы общее количество объединенных и обычных ячеек одной строки было равно общему количеству ячеек другой строки. Рассмотрим в качестве примера правую таблицу первого рисунка. Верхняя строка содержит в себе только одну большую ячейку состоящую из двух обычных, а нижняя строка содержит в себе две обычных ячейки. Ниже представлен вариант правильно написанного кода: Пояснения к коду: Верхняя строка <tr> имеет одну ячейку <td> , для которой прописан атрибут colspan со значением 2 . Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка <tr> имеет 2 обычные ячейки <td> . Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно. Теперь пример кода с распространенной ошибкой: Пояснения к коду: Ошибка в том, что первая строка <tr> содержит не две ячейки <td> , а три, в то время как вторая строка <tr> содержит две ячейки <td> . Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов <td> одинаковое. Но один из тегов <td> имеет атрибут colspan со значением 2 , это значит, что эта одна ячейка занимает место двух. Атрибут rowspan. Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan . Пояснения к коду: Верхняя строка <tr> имеет три ячейки <td> , для одной из них прописан атрибут rowspan со значением 3 . Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки <tr> имеют лишь по две ячейки <td> , но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем. Статьи по теме E-mail (электронная почта): что это такое, зачем это нужно Что лучше Virtualbox или Vmware Программы на подобии virtualbox Регистрация, вход и устранение неполадок в рамблер-почта Samsung Galaxy Alpha - Технические характеристики Samsung galaxy alpha технические характеристики Основные ветки развития World of Tanks и их особенности Как зайти в одноклассники на свою страницу? Последние статьи 2023-08-01 01:24:34 Прохождение игры после пробуждения в Dawnguard Пещера ночной пустоты как выйти 2023-07-30 01:24:07 Как можно разблокировать найденный айфон 2023-07-29 01:21:48 Бесплатные gps-навигаторы для Андроид с offline-картами Популярные статьи Селфи палки — что это и какие они бывают Лучшие приложения для селфи Получение Root LG L70 (D325) Как найти ролик на ютубе, если не знаешь названия Почему упал ФПС в World of Tanks Читы на слитки в скайриме - как получить слитки в игре Выбор редакции 2023-07-23 01:22:09 Как поднять фпс в World of tanks для слабых компьютеров Мод который показывает фпс в майнкрафт 1 Рассмотрим насущный для многих геймеров вопрос - оптимизация мира танков и поднятие FPS для слабых компьютеров.Многим известно, что World of tanks... 2023-07-21 01:15:57 Обзор Vernee Thor Plus: огромная батарея и Super AMOLED дисплей Vernee тор плюс мобильный телефон 6200 мач Молодой китайский бренд в лице Vernee Thor Plus в очередной раз радует публику уникальной новинкой. Попробуйте найти на рынке еще один столь же тонкий... 2023-07-20 01:28:09 Как вывести виндовс 10 из спящего режима Спящий режим в Windows 10 является прекрасной альтернативой полного завершения работы компьютера. Существует огромное количество пользователей,... 2023-07-19 01:11:12 Вирусная реклама: примеры видео, эффективность и возможности вирусного маркетинга Приемы вирусной рекламы 1. Написание и оценка сценария · Невероятность сценария : сюжет ролика должен “взрывать” мозг. · Идея должна “цеплять” , показывая необычный взгляд... 2023-07-18 01:12:12 Непредсказуемый Лаки блок в Minecraft PE Лучшие лаки блоки Данная игра теперь стала доступна абсолютно для каждого в бесплатной версии. Загрузить игру можно незамедлительно и очень легко. Для того, чтобы... vonline64.ru Windows 7 Антивирусы Браузеры Игры Интернет и wifi Ноутбуки Операторы Полезное Программы Ремонт Социальные сети Телефоны и связь