таблиц лучше всего рассмотреть на примере простой таблицы, HTML-код которой приведен в листинге 5.10.
Это обычная таблица, ячейки которой пронумерованы - так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
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.
Когда вы решаете аналогичные задачи в каком-нибудь текстовом редакторе, например, наиболее распространенном – Word, то он практически все делает сам, достаточно лишь нажать соответствующую кнопку. Но если говорить про решение этой задачи в HTML, то здесь все иначе. И если вы будете внимательным, то задача не будет казаться такой уж непосильной.
Объединение ячеек в строках
В первую очередь расскажем, как объединить строки в таблице в HTML. В этом поможет атрибут colspan , который работает с такими тегами, как
Например, вы приписываете данному атрибуту значение 2 . В результате этого ячейка, к которой относится тег, увеличивается в горизонтальном направлении ровно в 2 раза, вытесняя соседнюю. Но вытесненная ячейка никуда не уходит, она присутствует в таблице, только в совершенно новом столбце, который необходимо убрать.
Давайте попрактикуемся, как это делается. Итак, начнем. Попробуем создать таблицу следующего вида:
Согласно вышеописанным правилам нам нужно создать строку, добавить одну простую ячейку, а следом в этой же строке добавить ячейку, которая будет занимать место двух простых ячеек.
В следующей строке нам нужно лишь добавить три простых ячейки. Звучит несложно, давайте перенесём наши мысли в код:
| 1 | 2 | |
| 3 | 4 | 5 |
Вот и всё! Совсем ничего страшного!
Объединение ячеек в столбцах
В вертикальном направлении ячейки объединять немногим сложнее, нежели в горизонтальном. Эта задача решается с помощью атрибута rowspan , который приписывается тегам
Если данному атрибуту задается значение 2 , то ячейка увеличивается в размерах уже вертикально и тянется на следующую строку. Ячейка, расположенная под той, что увеличивается в размерах, идет вправо, что опять-таки образует лишний столбец. И чтобы удалить его, необходимо просто удалить ячейку.
Давайте теперь создадим следующую таблицу:
Подумаем, что нам нужно сделать. Нам нужно добавить ячейку, которая занимает по вертикали места в 2 раза больше, чем простая. затем добавить в этой же строке две простых ячейки.
Переходим на следующую строку. Здесь у нас сразу уже занятое место ячейкой сверху. Переходим в следующую секцию и видим, что нам в этой строке остаётся только добавить две простых ячейки. Переносим в код:
| 1 | 2 | 3 |
| 4 | 5 |
Опять-таки, ничего сложного.
Одновременное объединение по вертикали и горизонтали в одной таблице
В реальных ситуациях таблицы такого типа встречаются очень часто. Попробуйте самостоятельно, используя предложенный нами способ рассуждения, создать с помощью HTML-кода следующую таблицу:
Если всё же не получилось, то вот ответ:
| Продукция | Налоговая ставка | ||
|---|---|---|---|
| c 01.01 по 31.01.2015 | c 01.01 по 31.01.2016 | c 01.01.2015 | |
| Дизельное топливо | 3450 руб. за 1 тонну | 4150 руб. за 1 тонну | 3950 руб. за 1 тонну |
Здравствуйте, сегодня я расскажу вам, как сделать в html объединение ячеек в таблице по горизонтали и по вертикали.
Заморачиваться особо не будем, я создам простую таблицу из трех рядов и четырех ячеек в каждом ряде. Для них заданы простейшие стили, чтобы все отображалось корректно.
Table{ border-collapse: collapse; } td{ border: 1px solid black; width: 60px; height: 50px; }
Объединение ячеек по горизонтали
Начнем с этого, потому что этот прием проще. Допустим, вы хотите в первом ряду четыре ячейки объединить в одну. Это можно сделать с помощью атрибута colspan:
- Прописываем нужной ячейке атрибут colspan = «число ячеек, которые нужно объединить»
- Удаляем все лишние ячейки
Например:
Смотрите на этот кусок кода. Поскольку для первой ячейки в ряде задан colspan 4 , по сути, она займет место четырех ячеек, а значит, следующие 3 в ряде нужно удалить, в них просто нет необходимости теперь.
Если же их не удалить, то в ряде образуется целых 7 ячеек и конечно он станет намного шире, чем следующие два.
Теперь удаляем их и видим, что все прекрасно отображается.
Объединение по вертикали
Это немного сложнее и осуществляется по такой же технологии, только используется атрибут под названием rowspan и удалять нужные ячейки нужно в столбце, а не ряде, что немного усложняет задачу, но на самом деле все просто, если вы быстро поймете суть.
Давайте объединим последние ячейки в ряде 2 и 3. Для этого последней клетке в ряде 2 запишем rowspan = "2" . Теперь нужно в ряде 3 удалить последнюю ячейку. Если этого не делать, то опять же, будут вылезать лишние ячейки, что будет сильно портить внешний вид нашей таблицы.
Объединение по обеим сторонам
Одной ячейке можно задать оба атрибута. Давайте тоже посмотрим, как это работает. Объединим в одну ячейку 2 первые клетки ряда 2, и две первые – ряда 3. Итого 4 клетки объединим в одну.
class="eliadunit">
При необходимости в программе Excel имеется возможность объедения данные из нескольких ячеек в одну. Склеить можно как однотипные данные (число+число) так и разнотипные (число+слово). Эти операция проделываются при помощи формулы СПЕЦИТЬ (или в английском варианте CONCATENATE). Аналогом этой формулы является использование знака под названием амперсанд (&). Научиться использовать сцепление в Excel лучше на реальных примерах.
Первый пример: использование объединение слов в одну ячейку в Excel (например, при написании объявлений в Яндекс Директ). Задача: добавить к тексту объявления слова «Звоните!» и «Звоните сейчас!». В столбце B находится текст объявления, в столбце C – слово «Звоните», в следующем столбце: «!» или «сейчас!»:
С целью масштабного объединения в столбце A вставляем формулы (знак амперсанд вставляется при английской раскладке Shift+7):
=СЦЕПИТЬ(B1;" ";C1;D1)
=B2&" "&C2&D2
=СЦЕПИТЬ(B3;" ";C3;D3)
=B4&" "&C4&D4
class="eliadunit">
В кавычках стоит знак пробела. Можно таким образов вставлять слова или даже предложения. В результате получаем такую картину в Excel:
Обычно подобное объединение используют к тексту и соответственно формула СЦЕПИТЬ относится к текстовым. Но её можно использовать и с числами. Вот пример:
Стоит обратить внимание на то, что с полученными результатами можно работать как с числами. Суммировать, умножать, делить и т.д. Но использовать в числовой формуле не получить. Например, если в ячейки суммы прописать формулу =СУММ (A2:A5), то подсчёт составит 0.
Далее разберем пример, когда нужно объединить текст и ячейку с числом, к которой применен какой-либо формат отображения (дата, финансы и др.). Если использовать только амперсанд или формулу СЦЕПИТЬ, требуемое значение будет отображаться некорректно (столбец A):
Для правильного отображения (столбец B), нужно использовать формулу ТЕКСТ. Её синтаксис следующий: ТЕКСТ(номер ячейки или значение;« формат числового значения»). С форматами можно познакомиться в меню Excel во вкладке «Главная», раздел «Число».
Имея, вышеперечисленные знания можно умело в Microsoft Excel объединять значения в одну ячейку.
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега
Пример 12.3. Неверное объединение ячеек
| Ячейка 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» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
