Для объединения двух и более ячеек в одну используются атрибуты 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.
Это делается с помощью тэга
. Таблицы состоят из строк,
внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг
добавляет в таблицу строку, а тэг
добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:
Для того, чтобы были видны рамки таблицы, тэгу
был задан
атрибут border
, но в HTML5 этот атрибут считается устаревшим, и использование
его не желательно. Кроме того, есть и другие атрибуты для работы с рамками и изменения
фона, а так же у ячеек есть атрибуты для выравнивания контента. Все эти атрибуты также нежелательны,
вместо них нужно использовать стили.
Объединение ячеек таблицы
Есть возможность объединить ячейки таблицы в одну. Для этого у тэга
есть атрибут colspan
, который объединяет
ячейки внутри одной строки, а также атрибут rowspan
, который объединяет ячейки
из разных строк. Значением этих атрибутов является количество объединяемых ячеек.
Создадим такую таблицу:
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек, поэтому общее количество
ячеек в этой строке будет меньше, чем в других, в данном случае, одна.
Теперь создадим такую таблицу:
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
- заголовочная ячейка. Обычно находятся в первой строке таблицы.
Используются для создания названия колонки таблицы. От тэга
отличается
только жирным шрифтом и выравниванием по центру.
- находится внутри тэга
,
добавляет заголовок таблицы.
- cодержит несколько первых строк таблицы для указания особого
стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с
самой первой строки.
- содержит несколько строк таблицы для указания особого стиля.
Таких тегов в таблице может быть несколько.
- содержит строки таблицы, которые отобразятся в самом низу
таблицы.
- определяет стиль для одной колонки таблицы, начиная с первой. То есть
первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает
по-разному в разных браузерах.
Подробно и детально расскажу о том, как объединять ячейки по вертикали и горизонтали в таблицах.
В этой статье мы не будем объяснять принципы создания html
таблиц, для получениях этих знаний пройдите наш курс по HTML .
Для объединения ячеек внутри table
существуют два атрибута, задаваемые тэгу
это colspan
(объединение по горизонтали) и rowspan
(объединение по вертикали).
У некоторых людей появляются затруднения с использованием этих атрибутов, проблемы с объединением ячеек.
Атрибуты colspan и rowspan принимают в качестве параметра целые значения от 0
до 1000
. Вот небольшой пример того, как можно объединять ячейки в таблице.
На первый взгляд реализована не очень сложная структура, но поглядев на обилие
и
элементов в коде сложно понять по какому принципу можно объединить еще пару ячеек.
Мы вам предлагаем универсальный и очень удобный способ объединения ячеек.
Для начала подготовьте заготовку вашей будущей таблицы, представив ее со всеми разделенными ячейками. Это может быть таблица 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
Вот и все, мы получили исходную таблицу, теперь ячейки можно заполнять той информацией, которая вам будет удобно.
Надеемся, вы поняли принцип создания сложных таблиц с объединением ячеек.
3.8. Объединение ячеек таблицы
На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали.
На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7.
Рис. 3.12.
Таблица с объединенными ячейками
Листинг 3.7.
Пример использования атрибутов объединения ячеек
HTML-таблица
Ячейка объединяет в себе все ячейки строки
Ячейка на две строки
Ячейка 2х2
Ячейка 2х3
Ячейка 3х2
Ячейка 3х3
Ячейка на две строки
Ячейка 4х2
Ячейка 4х3
Ячейка 5х2
Ячейка 5х3
Из книги
Компьютер на 100. Начинаем с Windows Vista
автора
Зозуля Юрий
Выделение ячеек
Чтобы изменить параметры форматирования сразу нескольких ячеек, их нужно выделить, используя один из следующих приемов.? Для выделения отдельной ячейки подведите указатель мыши к ее левой границе и, когда он примет форму черной наклонной стрелки,
Из книги
AutoCAD 2009
автора
Орлов Андрей Александрович
Очистка ячеек
В предыдущем уроке уже упоминалось, что для очистки ячейки достаточно сделать ее активной и нажать клавишу Delete. Таким же образом можно очистить сразу несколько ячеек, предварительно выделив нужный диапазон.Очистка приводит к удалению только имеющихся в
Из книги
Excel. Мультимедийный курс
автора
Мединов Олег
Изменение ячеек таблицы
Чтобы изменить ячейку таблицы, вы должны щелкнуть на ней кнопкой мыши. Отобразятся маркеры управления (рис. 4.45).
Рис. 4.45. Выделенная ячейка таблицыПеремещая указатель при нажатой кнопке мыши, вы можете выделить группу ячеек. Можно также выделить
Из книги
AutoCAD 2010
автора
Орлов Андрей Александрович
Объединение ячеек
Две и более ячейки на листе могут быть объединены в одну. Объединение ячеек может понадобиться, например, при создании общего заголовка для нескольких столбцов (рис. 3.15).
Рис. 3.15. Пример объединения ячеекЧтобы объединить ячейки, выполните следующие
Из книги
Основы информатики: Учебник для вузов
автора
Малинина Лариса Александровна
Изменение ячеек таблицы
Чтобы изменить ячейку таблицы, вы должны щелкнуть на ней кнопкой мыши. При этом отобразятся маркеры управления (рис. 4.46).
Рис. 4.46. Выделенная ячейка таблицыПеремещая указатель при нажатой кнопке мыши, вы можете выделить группу ячеек. Можно также
Из книги
MySQL: руководство профессионала
автора
Паутов Алексей В
6.5. Форматирование ячеек
Форматирование текста и размещение его внутри ячейки1. В меню Формат выберите команду Ячейки, затем перейдите к вкладке Выравнивание. Выберите соответствующие параметры выравнивания по горизонтали и вертикали, а также, если необходимо,
Из книги
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.
автора
Дронов Владимир
10.3.3. Набор символов и объединение таблицы
Каждая таблица имеет набор символов таблицы и объединение. Инструкции CREATE TABLE и ALTER TABLE имеют факультативные предложения для определения набора символов таблицы и объединения:CREATE TABLE tbl_name(column_list)[ CHARACTER SET charset_name]}
