Подробно и детально расскажу о том, как объединять ячейки по вертикали и горизонтали в таблицах.
элементов в коде сложно понять по какому принципу можно объединить еще пару ячеек.
Мы вам предлагаем универсальный и очень удобный способ объединения ячеек.
Для начала подготовьте заготовку вашей будущей таблицы, представив ее со всеми разделенными ячейками. Это может быть таблица 3х3
, 6х10
и так далее. Каждой ячейке дадим свой номер, начиная считать слева направо и сверху вниз.
Разберем создание таблицы, показанной выше по этому методу.
Вот как будет выглядеть код нашей заготовки и сама заготовка:
| 1
|
2
|
3
|
4
|
| 5
|
6
|
7
|
8
|
| 9
|
10
|
11
|
12
|
| 13
|
14
|
15
|
16
|
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
| 13 |
14 |
15 |
16 |
Необходимо объединить ячейки с номерами 1,2,3 по горизонтали. Для этого в коде, ячейке № 1 добавляем атрибут colspan
со значением 3
. И удаляем
элементы с номерами 2 и 3. Номера объединенных ячеек запишем в полученную ячейку.
| 1,2,3
|
4
|
| 5
|
6
|
7
|
8
|
| 9
|
10
|
11
|
12
|
| 13
|
14
|
15
|
16
|
| 1,2,3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
| 13 |
14 |
15 |
16 |
Теперь нам нужно объединить ячейки 9 и 13 по вертикали. Проделываем аналогичную процедуру - ячейке № 9 задаем атрибут rowspan
со значением 2
, удаляем ячейку с № 13, в объединенную ячейку записываем номера ячеек из которых она состоит.
Так изменится наш код и внешний вид таблицы:
| 1,2,3
|
4
|
| 5
|
6
|
7
|
8
|
| 9,13
|
10
|
11
|
12
|
| 14
|
15
|
16
|
| 1,2,3 |
4 |
| 5 |
6 |
7 |
8 |
| 9,13 |
10 |
11 |
12 |
| 14 |
15 |
16 |
Осталось объединить 11,12,15,16 ячейки в одну. Для этого ячейке с № 11 записываем атрибуты colspan
="2"
rowspan
="2"
. Ячейки 12,15,16 удаляем из кода. Записываем в объединенную ячейку номера 11,12,13,14.
Так изменится наш код и внешний вид таблицы:
| 1,2,3
|
4
|
| 5
|
6
|
7
|
8
|
| 9,13
|
10
|
11,12,15,16
|
| 14
|
| 1,2,3 |
4 |
| 5 |
6 |
7 |
8 |
| 9,13 |
10 |
11,12,15,16 |
| 14 |
Вот и все, мы получили исходную таблицу, теперь ячейки можно заполнять той информацией, которая вам будет удобно.
Надеемся, вы поняли принцип создания сложных таблиц с объединением ячеек.
Урок 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>
, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.
таблиц
лучше всего рассмотреть на примере простой таблицы, 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-дизайна, трудно было встретить таблицу без объединенных ячеек
. Так или иначе, знать о нем не помешает.
Осталось поговорить об одной интересной особенности языка 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. Найти в коде этой строки тег
Обратим внимание, что мы удалили из второй строки тег , создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна (о табличном Web-дизайне см. в главе 10
), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.
Была ли эта статья полезной?
Что-то пошло не так и Ваш голос не был учтен.
Спасибо. Ваше сообщение отправлено
Нашли в тексте ошибку?
Выделите её, нажмите Ctrl + Enter и мы всё исправим!
|
