Урок по HTML. Объединение ячеек. Объединение ячеек Команда объединения ячеек таблицы в html

При создании таблиц в 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 в одном столбце можно использовать, если нужно создать заголовок для группы строк, примыкающих к этому столбцу. Это также может помочь разделить группы строк по типу.

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

Перевод статей «How to Combine Cells Horizontally in an HTML Table Colspan », «How to Combine Cells Vertically in an HTML Table: Rowspan » был подготовлен дружной командой проекта

Весьма удобный элемент. С ними можно делать что угодно. Разумеется, основное назначение - размещение информации в виде таблицы. Но разработчики сайтов пошли дальше. Одно время очень популярно было использовать таблицы для создания каркаса сайта. Сейчас профессионалы стараются так не делать.

Таблицы нашли свое широкое применение из-за большого количества атрибутов. Например, очень полезным оказалось свойство объединения строк или столбцов.

Введение в теорию

В HTML объединение ячеек происходит при помощи двух атрибутов: colspan и rowspan. Они указываются для тега td.

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

На рисунке выше указано две строки, и в каждой по три ячейки. Это является обычной таблицей. Если вы в какой-нибудь строке укажите меньшее количество ячеек, то таблица "съедет", всё будет отображаться некорректно.

HTML-таблица: объединение ячеек по вертикали и горизонтали

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

Обратите внимание, что указывать нужно именно в ближайшем элементе к началу. Например, на рисунке выше, если бы вы хотели объединить ячейку 1 и 2, нужно указать в ячейке 1 атрибут colspan со значением два. И удалить ячейку номер 2 или 3, уже не важно.

Суть заключается в том, что вы указываете ячейке, сколько пространства она займет. По умолчанию значение составляет 1.

Объединение ячеек по вертикали HTML-таблицы происходит по такому же принципу. Просто занимаемое пространство будет считаться по вертикали. Смотрим рисунок ниже.

Здесь ячейка с цифрой 43 занимает две строки. Для этого указали атрибут rowspan. Запоминается просто:

  • Row - строка.
  • Col - колонка/столбец.
  • Span - объединение.

Создатели языка старались максимально приблизить его к человеческому, чтобы, даже не зная его, можно было хоть как-то разбираться.

В HTML объединение ячеек можно делать сразу в двух направлениях: по вертикали и горизонтали. Для этого указываем одновременно оба атрибута.

На рисунке выше как раз это и указано, что можно делать объединение: строк, столбцов и одновременно столбцов и строк.

HTML: объединение ячеек. Примеры

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

Так же можно объединить три ячейки в центре. В первом случае атрибут colspan указывали в ячейке №1. Здесь первая будет без изменений, а во второй добавлен colspan, равный трем.

Если же вы хотите объединить все ячейке в строке до единой, то удаляем четыре td и в первой указываем colspan="5".

Как видите, на деле всё это просто. Сложного ничего нет. Главное, внимательно, с первого раза, разобраться во всех подводных камнях таблиц, и потом никаких проблем возникать не должно.

Таблицы как каркас сайта

В HTML объединение ячеек не всегда используется для обычных таблиц с информацией (как в Word или Excel). Разработчики сайтов часто, а раньше поголовно использовали их для верстки сайтов.

Например, можно рассмотреть этот макет сайта. Данный дизайн - очень простой и примитивный. Но здесь можно показать использование объединения явным образом.

Здесь изначально была таблица из трех строк, по две ячейки в каждой. Затем, чтобы разместить логотип сайта, две ячейки в первой строке были объединены. В нижней строке сделали то же самое, чтобы разместить "подвал".

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

Заключение

И помните, что в HTML table объединение ячеек можно делать как угодно. Всё зависит от того, что вам надо, и как вы хотите это оформить. Главное, не запутайтесь. Если хотите создать большую таблицу с большим количеством объединений, то рекомендуется предварительно нарисовать всё это на листочке или в Paint. Начинающим верстальщикам так будет проще.

Когда наберетесь опыта, такие операции вы сможете без труда производить в своей голове.

Осталось поговорить об одной интересной особенности языка 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 ), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.

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

В этой статье мы не будем объяснять принципы создания 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

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

Надеемся, вы поняли принцип создания сложных таблиц с объединением ячеек.

таблиц лучше всего рассмотреть на примере простой таблицы, 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-дизайна, трудно было встретить таблицу без объединенных ячеек . Так или иначе, знать о нем не помешает.