Урок 11.
В этом уроке продолжаем изучать таблицы, а именно мы рассмотрим еще два атрибута для тега <td> , которые отвечают за объединение ячеек. Посмотрев на рисунок ниже, Вы поймете о каком объединении пойдет речь.
Таблица изображенная слева, имеет обычную структуру. У правой таблицы в первой строке две ячейки объединены между собой, образуя одну большую ячейку.
Применение этих атрибутов немного сложнее, чем применение других. Именно по этому им отведен отдельный урок.
Атрибут colspan используется для объединения ячеек по горизонтали. В значении атрибута указывается число ячеек объединяемых в одну.
Внимание! Очень важно, чтобы общее количество объединенных и обычных ячеек одной строки было равно общему количеству ячеек другой строки.
Рассмотрим в качестве примера правую таблицу первого рисунка. Верхняя строка содержит в себе только одну большую ячейку состоящую из двух обычных, а нижняя строка содержит в себе две обычных ячейки.
Ниже представлен вариант правильно написанного кода:
Пояснения к коду:
Верхняя строка <tr>
имеет одну ячейку <td>
, для которой прописан атрибут colspan
со значением 2
. Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка <tr>
имеет 2 обычные ячейки <td>
.
Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно.
Теперь пример кода с распространенной ошибкой:
Пояснения к коду:
Ошибка в том, что первая строка <tr>
содержит не две ячейки <td>
, а три, в то время как вторая строка <tr>
содержит две ячейки <td>
.
Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов <td>
одинаковое. Но один из тегов <td>
имеет атрибут colspan
со значением 2
, это значит, что эта одна ячейка занимает место двух.
Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan .
Пояснения к коду:
Верхняя строка <tr>
имеет три ячейки <td>
, для одной из них прописан атрибут rowspan
со значением 3
. Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки <tr>
имеют лишь по две ячейки <td>
, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.
Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример - простую таблицу, HTML-код которой приведен в листинге 5.10.
Листинг 5.10
Это обычная таблица, ячейки которой пронумерованы - так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и
Рис. 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> < td align= "left" > C2R1 td> < td align= "left" > C3R1 td> < td align= "left" > C4R1 td> < td align= "left" > C5R1 td> tr> < tr> < td align= "left" > C1R2 td> < td align= "left" > C2R2 td> < td align= "left" > C3R2 td> < td align= "left" > C4R2 td> < td align= "left" > C5R2 td> tr> < tr> < td align= "left" > C1R3 td> < td align= "left" > C2R3 td> < td align= "left" > C3R3 td> < td align= "left" > C4R3 td> < td align= "left" > C5R3 td> tr> < tr> < td align= "left" > C1R4 td> < td align= "left" > C2R4 td> < td align= "left" > C3R4 td> < td align= "left" > C4R4 td> < td align= "left" > C5R4 td> tr> < tr> < td align= "left" > C1R5 td> < td align= "left" > C2R5 td> < td align= "left" > C3R5 td> < td align= "left" > C4R5 td> < td align= "left" > C5R5 td> tr> tbody> table> div> |
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 | 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. Для этого необходимо:
Таблица примет следующий вид:
C1R1 | C2R1 | C5R1 | ||
C2R2 | C3R2 | C4R2 | C5R2 | |
C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
Вам останется лишь заполнить таблицу содержимым: образцами своих переводов в портфолио и т.д.
3.8. Объединение ячеек таблицы
На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали.
На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7.
Рис. 3.12. Таблица с объединенными ячейками
Листинг 3.7. Пример использования атрибутов объединения ячеек
Ячейка объединяет в себе все ячейки строки | ||
---|---|---|
Ячейка на две строки | Ячейка 2х2 | Ячейка 2х3 |
Ячейка 3х2 | Ячейка 3х3 | |
Ячейка на две строки | Ячейка 4х2 | Ячейка 4х3 |
Ячейка 5х2 | Ячейка 5х3 |