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

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

Когда вы решаете аналогичные задачи в каком-нибудь текстовом редакторе, например, наиболее распространенном – Word, то он практически все делает сам, достаточно лишь нажать соответствующую кнопку. Но если говорить про решение этой задачи в HTML, то здесь все иначе. И если вы будете внимательным, то задача не будет казаться такой уж непосильной.

Объединение ячеек в строках

В первую очередь расскажем, как объединить строки в таблице в HTML. В этом поможет атрибут colspan , который работает с такими тегами, как и .

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

Давайте попрактикуемся, как это делается. Итак, начнем. Попробуем создать таблицу следующего вида:

Согласно вышеописанным правилам нам нужно создать строку, добавить одну простую ячейку, а следом в этой же строке добавить ячейку, которая будет занимать место двух простых ячеек.
В следующей строке нам нужно лишь добавить три простых ячейки. Звучит несложно, давайте перенесём наши мысли в код:

Вот и всё! Совсем ничего страшного!

Объединение ячеек в столбцах

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

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

Давайте теперь создадим следующую таблицу:

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

Опять-таки, ничего сложного.

Одновременное объединение по вертикали и горизонтали в одной таблице

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

Если всё же не получилось, то вот ответ:

Таблицы Excel построены несколько по иному принципу, чем в Word. Если в последнем мы можем разделять клетки, то в Эксель ячейка – неделимая единица. Вопрос получения двух столбцов под одной общей шапкой довольно распространен, поэтому важно знать, как объединить ячейки в Excel, поскольку в этом случае возникает необходимость именно объединения фрагмента таблицы.

Метод 1 – панель инструментов.

На панели вы увидите кнопку объединения.

Чтобы ею воспользоваться, выделите диапазон, подлежащий объединению, и нажмите ее.


В итоге будет произведено объединение.


Если нажать на стрелочку около этой кнопки, то вы увидите меню.

Команда «Объединить и поместить в центре» позволяет отцентрировать содержимое нового фрагмента. Если Вы попытаетесь объединить диапазон со значением, то будут сохранены данные только из первого из объединяемых адресов. А Вы увидите предупреждение.


Согласие приведет к потере остальных данных.


Команда «Объединить по строкам» создаст консолидированные ячейки в каждой строке.



Команда «Объединить ячейки» аналогична первой, только без выравнивания текста по центру.


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

Метод 2 – использование меню

В последних версиях офиса классическое меню было заменено на вкладки. А вызов привычных окон осуществляется с помощью небольших значков в правом нижнем углу вкладки.


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


Ставьте галочку около пункта «Объединение ячеек». Здесь же в соответствующих выпадающих полях вы можете указать параметры выравнивания данных.

Метод 3 – копирование уже объединенных данных

Если Вам нужно воспроизвести уже имеющееся объединение, то воспользуйтесь буфером обмена. Комбинация горячих клавиш для объединения ячеек в Excel в таком случае будет следующей:

CTRL+C – скопировать в буфер обмена.
CTR+V – вставить из буфера обмена.

Установите указатель на выбранную позицию.


Скопируйте с помощью нажатия CRTL+C. Признаком того, что данные скопированы будут «бегущие муравьи» - анимация рамки по ее границам.


Установите курсор на нужную клетку. Выделять при этом такое же количество адресов необязательно, Excel автоматически выберет необходимое число и выполнит команду. Правда, данные пропадут. Нажмите кнопки для вставки из буфера. Аналогичное объединение появится в выбранном месте.

Метод 4 – формат по образцу

В Excel, как и в любой программе пакета Office, есть очень удобная кнопка «Формат по образцу».
Она находится в разделе «Буфер обмена».


Поставьте указатель на объединенный фрагмент и нажмите эту кнопку. Переведите указатель на нужное место и щелкните мышью. Форматирование будет полностью воспроизведено.

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

Как объединить содержимое ячейки в таблице Excel с сохранением данных

Это актуальная проблема. В любом из предыдущих способов Excel удаляет данные. Для их сохранения используется функция «Сцепить».
Нажмите значок Fx около строки формул. Так вы вызовете окно вставки функций.

Введите в строку поиска название «Сцепить» и нажмите кнопку «Найти».



Выделите найденную функцию и нажмите «Ок». Появится окно настройки.


Укажите диапазон руками или выделите его мышью.


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

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

Еще одна возможность выполнить объединение текста из нескольких ячеек Excel
– воспользоваться оператором «&», который производит объединение строк. Чтобы начать ввод формулы, поставьте указатель на то место, где будет расположен новый текст и нажмите знак «=». Затем мышкой щелкните по первому адресу, нажмите &, щелкните по второму и так далее.


Объединение текста из двух разных ячеек в одну в Excel версий 2003-2010 осуществляется аналогично.

Как убрать объединение ячеек в Excel

Можно воспользоваться последним пунктом из меню кнопки «Объединить ячейки».


Или можно снять галочку в окне форматирования.

Как объединить с помощью макроса

Один из самых сложных способов – самостоятельно написать программу, которая позволит автоматизировать процесс. В пакет Microsoft Office добавлен разработчик кода на языке VBA. Чтобы им воспользоваться, нажмите ALT+F11. Откроется окно добавления программного кода.


Выполните команду Insert – Module.


Откроется окно для ввода данных.


Скопируйте и вставьте код.

Sub Merge_Column() Dim i1 As Long Dim i2 As Long Dim f As Long Dim textCol As String Application.DisplayAlerts = False For f = 1 To Selection.Areas.Count For i1 = 1 To Selection.Areas(f).Columns.Count textCol = Selection.Areas(f).Cells(1, i1) For i2 = 2 To Selection.Areas(f).Rows.Count textCol = textCol & Chr(10) & Selection.Areas(k).Cells(i2, i1) Next Selection.Areas(f).Columns(i1).Merge Selection.Areas(f).Cells(1, i1) = intext Next Next Application.DisplayAlerts = True End Sub

Перейдите в Excel, нажав на его значок в левом верхнем углу.


Выделите объединяемый диапазон и запустите макрос на вкладке «Вид» - «Макросы».


Выберите нужный макрос и нажмите кнопку «Выполнить».


Фрагменты таблицы будут объединяться.

Не активна кнопка ячейки в Excel

Это редкий случай, но тем не менее такое происходит.

Сортировка объединенных ячеек Excel

Здесь трудность заключается в том, что все сортируемые фрагменты должны иметь один размер. Поэтому Вам необходимо для нестандартных в столбце или строке объединений отменить операцию объединения, и выполнить ее заново в том же размере, что и все остальные. Например, если Вы пытаетесь отсортировать столбец, где все объединены по два, а один по три – либо все объединяйте по три, либо трех-ячейковый переводите в двух. Иначе получите такую ошибку


После того, как привели объединения в порядок, нажимайте кнопку «Сортировка и фильтр» в панели инструментов (справа) в разделе «Главная».

Выберите нужный вид сортировки.

Как найти объединенные ячейки в Excel

Если лист Excel большой, на нем бывает трудно обнаружить объединенные данные. В таком случае воспользуемся поиском. На вкладке «Главная» нажмите кнопку «Найти и выделить» и выберите «Найти». Или нажмите горячие клавиши Ctrl + F. Читайте больше


Затем нажмите «Параметры» и «Формат».


Поставьте галочку около пункта «Объединение ячеек» и нажмите «ОК».


Дальше нажмите «Найти все» или «Найти далее», и нужные адреса будут выделяться последовательно. При нажатии на первую кнопку Вы увидите перечень всех объединенных диапазонов.


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

Отличного Вам дня!

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

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

Для HTML объединения ячеек необходимо добавить в строку меньше ячеек, чем в остальные строки и добавить атрибут colspan=» « внутри тега ячейки, которую необходимо растянуть.

Рассмотрим простой пример HTML-таблицы с двумя строками и двумя столбцами (четыре ячейки ). Ее HTML-код выглядит следующим образом:

Ячейка в верхней строке теперь охватывает два столбца. Поскольку она занимает пространство двух ячеек, в первом ряду есть только один элемент td .

Можно осуществить объединение ячеек таблицы HTML в любой ее области с любым количеством столбцов. Одним из наиболее полезных применений объединения ячеек по горизонтали является создание заголовков таблицы. Если таблица имеет n столбцов, поместите атрибут colspan=»n» в первую ячейку верхнего ряда и удалите другие ячейки из этого ряда.

Как объединить ячейки в HTML-таблице по вертикали: rowspan

Атрибут rowspan=» » позволяет объединять ячейки по вертикали

Если нужно, чтобы ячейка охватывала несколько строк, следует добавить атрибут rowspan=» « внутри тега той ячейки, которую необходимо растянуть по вертикали. В каждой строке под строкой, где начинается растянутая ячейка, нужно удалить одну ячейку, чтобы таблица была выровнена. Например, когда вы растягиваете ячейку на три строки, необходимо удалить по одной ячейке в следующих двух строках.

Рассмотрим простой пример HTML-таблицы с четырьмя ячейками, разделенными на две строки и два столбца. HTML-код :

Чтобы осуществить HTML table объединение ячеек по вертикали, добавьте для первой ячейки верхней строки атрибут rowspan=»2″ , а затем удалите одну из ячеек в нижнем ряду. HTML-код теперь будет выглядеть следующим образом:

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

Способы комбинирования rowspan и colspan для создания пользовательских HTML-таблиц с ячейками, которые охватывают несколько строк и столбцов

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

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

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

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

Для объединения двух и более ячеек в одну используются атрибуты 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» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.