Html table объединение ячеек. Урок по HTML. Объединение ячеек. Как найти объединенные ячейки в 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» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.
Весьма удобный элемент. С ними можно делать что угодно. Разумеется, основное назначение - размещение информации в виде таблицы. Но разработчики сайтов пошли дальше. Одно время очень популярно было использовать таблицы для создания каркаса сайта. Сейчас профессионалы стараются так не делать.
Таблицы нашли свое широкое применение из-за большого количества атрибутов. Например, очень полезным оказалось свойство объединения строк или столбцов.
Введение в теорию
В 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х5. Для создания таблиц я использую . Код созданной конструктором таблицы 5х5 выглядит так:
| < div> < table border= "1" cellspacing= "1" cellpadding= "1" width= "100%" > < tbody> < tr> < td align= "left" > C1R1 < td align= "left" > C2R1 < td align= "left" > C3R1 < td align= "left" > C4R1 < td align= "left" > C5R1 < tr> < td align= "left" > C1R2 < td align= "left" > C2R2 < td align= "left" > C3R2 < td align= "left" > C4R2 < td align= "left" > C5R2 < tr> < td align= "left" > C1R3 < td align= "left" > C2R3 < td align= "left" > C3R3 < td align= "left" > C4R3 < td align= "left" > C5R3 < tr> < td align= "left" > C1R4 < td align= "left" > C2R4 < td align= "left" > C3R4 < td align= "left" > C4R4 < td align= "left" > C5R4 < tr> < td align= "left" > C1R5 < td align= "left" > C2R5 < td align= "left" > C3R5 < td align= "left" > C4R5 < td align= "left" > C5R5 |
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C1R2 | C2R2 | C3R2 | C4R2 | C5R2 |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
Сама таблица изначально выглядит так:
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C1R2 | C2R2 | C3R2 | C4R2 | C5R2 |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
I. Объединение ячеек по вертикали
Для вертикального объединения ячеек используется параметр rowspan
, задающий количество ячеек, объединенных по вертикали.
Объединим в указанной выше таблице ячейки C1R1 и C1R2. Для этого необходимо:
- Для ячейки C1R1 добавить параметр rowspan=»2″:
Теперь таблица выглядит так:
| C1R1 | C2R1 | C3R1 | C4R1 | C5R1 |
| C2R2 | C3R2 | C4R2 | C5R2 | |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
II. Объединение ячеек по горизонтали
Для горизонтального объединения ячеек используется параметр colspan
, задающий количество ячеек, объединенных по горизонтали.
Объединим в указанной выше таблице ячейки C2R1, C3R1 и C4R1. Для этого необходимо:
- Для ячейки C2R1 добавить параметр colspan=»3″:
Таблица примет следующий вид:
| C1R1 | C2R1 | C5R1 | ||
| C2R2 | C3R2 | C4R2 | C5R2 | |
| C1R3 | C2R3 | C3R3 | C4R3 | C5R3 |
| C1R4 | C2R4 | C3R4 | C4R4 | C5R4 |
| C1R5 | C2R5 | C3R5 | C4R5 | C5R5 |
Вам останется лишь заполнить таблицу содержимым: образцами своих переводов в портфолио и т.д.
таблиц лучше всего рассмотреть на примере простой таблицы, 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 объединение ячеек в таблице по горизонтали и по вертикали.
Заморачиваться особо не будем, я создам простую таблицу из трех рядов и четырех ячеек в каждом ряде. Для них заданы простейшие стили, чтобы все отображалось корректно.
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 клетки объединим в одну.
В таком случае ячейка во втором ряде получат оба этих атрибута, во втором ряде удаляется следующая за ней ячейка, в третьем – первые две.
Таким образом, можно создавать таблицы любой сложности, об их оформлении я уже немного рассказал в этой статье , сегодня же моей целью было показать вам трюк с объединением и я надеюсь, это у меня получилось и вы что-то поняли. Если есть вопросы, задавайте в комментарии.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.