Для объединения двух и более ячеек в одну используются атрибуты colspan
и rowspan
тега
. Атрибут colspan
устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan
, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, |
заменяет три ячейки, поэтому в следующей строке должно быть три тега |
или конструкция вида | ... | ... |
. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.
Пример 12.3. Неверное объединение ячеек
Неправильное использование colspan
| Ячейка 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-код которой приведен в листинге 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-таблицы 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 |
Сама таблица изначально выглядит так:
| 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. Для этого необходимо:
- Для ячейки 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. Для этого необходимо:
- Для ячейки 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 имеют две функции. Первая - это собственно таблицы, то есть вывод информации в виде
таблицы. А вторая - это вёртска страницы. Отдельные части контента размещаются в разных ячейках
таблицы и таким образом оказываются в нужном месте страницы.
Создание таблицы
Рассмотрим, как создать таблицу в HTML.
Это делается с помощью тэга
. Таблицы состоят из строк,
внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг
добавляет в таблицу строку, а тэг |
добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:
Для того, чтобы были видны рамки таблицы, тэгу
был задан
атрибут border
, но в HTML5 этот атрибут считается устаревшим, и использование
его не желательно. Кроме того, есть и другие атрибуты для работы с рамками и изменения
фона, а так же у ячеек есть атрибуты для выравнивания контента. Все эти атрибуты также нежелательны,
вместо них нужно использовать стили.
Объединение ячеек таблицы
Есть возможность объединить ячейки таблицы в одну. Для этого у тэга
есть атрибут colspan
, который объединяет
ячейки внутри одной строки, а также атрибут rowspan
, который объединяет ячейки
из разных строк. Значением этих атрибутов является количество объединяемых ячеек.
Создадим такую таблицу:
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек, поэтому общее количество
ячеек в этой строке будет меньше, чем в других, в данном случае, одна.
Теперь создадим такую таблицу:
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
|
- заголовочная ячейка. Обычно находятся в первой строке таблицы.
Используются для создания названия колонки таблицы. От тэга |
отличается
только жирным шрифтом и выравниванием по центру.
- находится внутри тэга
,
добавляет заголовок таблицы.
- cодержит несколько первых строк таблицы для указания особого
стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с
самой первой строки.
- содержит несколько строк таблицы для указания особого стиля.
Таких тегов в таблице может быть несколько.
- содержит строки таблицы, которые отобразятся в самом низу
таблицы.
- определяет стиль для одной колонки таблицы, начиная с первой. То есть
первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает
по-разному в разных браузерах.
При создании таблиц в 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
в одном столбце можно использовать, если нужно создать заголовок для группы строк, примыкающих к этому столбцу. Это также может помочь разделить группы строк по типу.
| | |
