Html таблицы объединение ячеек. Урок по HTML

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

Рассмотрим, как объединяются ячейки, на примере HTML-таблицы 5х5. Для создания таблиц я использую . Код созданной конструктором таблицы 5х5 выглядит так:

< div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" > C1R1 < td align= "left" > C2R1 < td align= "left" > C3R1 < td align= "left" > C4R1 < td align= "left" > C5R1 < tr> < td align= "left" > C1R2 < td align= "left" > C2R2 < td align= "left" > C3R2 < td align= "left" > C4R2 < td align= "left" > C5R2 < tr> < td align= "left" > C1R3 < td align= "left" > C2R3 < td align= "left" > C3R3 < td align= "left" > C4R3 < td align= "left" > C5R3 < tr> < td align= "left" > C1R4 < td align= "left" > C2R4 < td align= "left" > C3R4 < td align= "left" > C4R4 < td align= "left" > C5R4 < tr> < td align= "left" > C1R5 < td align= "left" > C2R5 < td align= "left" > C3R5 < td align= "left" > C4R5 < td align= "left" > C5R5

Сама таблица изначально выглядит так:

C1R1	C2R1	C3R1	C4R1	C5R1
C1R2	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

I. Объединение ячеек по вертикали
Для вертикального объединения ячеек используется параметр rowspan , задающий количество ячеек, объединенных по вертикали.
Объединим в указанной выше таблице ячейки C1R1 и C1R2. Для этого необходимо:

1. Для ячейки C1R1 добавить параметр rowspan=»2″:

C1R2

Теперь таблица выглядит так:

C1R1	C2R1	C3R1	C4R1	C5R1
	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

II. Объединение ячеек по горизонтали
Для горизонтального объединения ячеек используется параметр colspan , задающий количество ячеек, объединенных по горизонтали.
Объединим в указанной выше таблице ячейки C2R1, C3R1 и C4R1. Для этого необходимо:

1. Для ячейки C2R1 добавить параметр colspan=»3″:

C3R1 C4R1

Таблица примет следующий вид:

C1R1	C2R1			C5R1
	C2R2	C3R2	C4R2	C5R2
C1R3	C2R3	C3R3	C4R3	C5R3
C1R4	C2R4	C3R4	C4R4	C5R4
C1R5	C2R5	C3R5	C4R5	C5R5

Вам останется лишь заполнить таблицу содержимым: образцами своих переводов в портфолио и т.д.

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

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

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

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

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

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

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

2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.

3. Удалить теги (), создающие остальные объединяемые ячейки данной строки.

Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.

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

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

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

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

3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек , считая и самую первую из них.

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

Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).

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

Сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна, трудно было встретить таблицу без объединенных ячеек . Так или иначе, знать о нем не помешает.

Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега . Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan , с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, заменяет три ячейки, поэтому в следующей строке должно быть три тега или конструкция вида ...... . Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Пример 12.3. Неверное объединение ячеек

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

Результат данного примера показан на рис. 12.5.

Рис. 12.5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan , а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование атрибутов colspan и rowspan продемонстрировано в примере 12.4.

Пример 12.4. Объединение ячеек по вертикали и горизонтали

Браузер	Internet Explorer		Opera			Firefox
	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Поддерживается	Нет	Да	Нет	Да	Да	Да	Да

Результат данного примера показан на рис. 12.6.

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

При создании таблиц в 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.

Когда вы решаете аналогичные задачи в каком-нибудь текстовом редакторе, например, наиболее распространенном – Word, то он практически все делает сам, достаточно лишь нажать соответствующую кнопку. Но если говорить про решение этой задачи в HTML, то здесь все иначе. И если вы будете внимательным, то задача не будет казаться такой уж непосильной.

Объединение ячеек в строках

В первую очередь расскажем, как объединить строки в таблице в HTML. В этом поможет атрибут colspan , который работает с такими тегами, как и .

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

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

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

1	2
3	4	5

Вот и всё! Совсем ничего страшного!

Объединение ячеек в столбцах

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

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

Давайте теперь создадим следующую таблицу:

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

1	2	3
	4	5

Опять-таки, ничего сложного.

Одновременное объединение по вертикали и горизонтали в одной таблице

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

Если всё же не получилось, то вот ответ:

Размер акцизного сбора на дизельное топливо

Продукция	Налоговая ставка
	c 01.01 по 31.01.2015	c 01.01 по 31.01.2016	c 01.01.2015
Дизельное топливо	3450 руб. за 1 тонну	4150 руб. за 1 тонну	3950 руб. за 1 тонну