Объединение ячеек по горизонтали. Объединение ячеек. Использование вертикально объединенных ячеек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C1R2

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

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

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

C3R1 C4R1

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

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

Урок 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 объединение ячеек в таблице по горизонтали и по вертикали.

Заморачиваться особо не будем, я создам простую таблицу из трех рядов и четырех ячеек в каждом ряде. Для них заданы простейшие стили, чтобы все отображалось корректно.

Table{
border-collapse: collapse;
}
td{
border: 1px solid black;
width: 60px;
height: 50px;
}

Объединение ячеек по горизонтали

Начнем с этого, потому что этот прием проще. Допустим, вы хотите в первом ряду четыре ячейки объединить в одну. Это можно сделать с помощью атрибута colspan:

1. Прописываем нужной ячейке атрибут colspan = “число ячеек, которые нужно объединить”
2. Удаляем все лишние ячейки

Например:

Смотрите на этот кусок кода. Поскольку для первой ячейки в ряде задан colspan 4 , по сути, она займет место четырех ячеек, а значит, следующие 3 в ряде нужно удалить, в них просто нет необходимости теперь.

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

Теперь удаляем их и видим, что все прекрасно отображается.

Объединение по вертикали

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

Давайте объединим последние ячейки в ряде 2 и 3. Для этого последней клетке в ряде 2 запишем rowspan = “2” . Теперь нужно в ряде 3 удалить последнюю ячейку. Если этого не делать, то опять же, будут вылезать лишние ячейки, что будет сильно портить внешний вид нашей таблицы.

Объединение по обеим сторонам

Одной ячейке можно задать оба атрибута. Давайте тоже посмотрим, как это работает. Объединим в одну ячейку 2 первые клетки ряда 2, и две первые – ряда 3. Итого 4 клетки объединим в одну.

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

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

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