Html объединить ячейки таблицы


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

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

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

В 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. Здесь первая будет без изменений, а во второй <td> добавлен colspan, равный трем.

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

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

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

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

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

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

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

Заключение


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

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

fb.ru

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

Для объединения ячеек по горизонтали вы должны указать в теге <TD> или <TH> атрибут colspan, его значением является любое положительное число, показывающее, сколько ячеек, начиная с текущей, объединены. При этом в самом ряде (строке) таблицы надо меньшее количество тегов ячеек, чтобы сохранилась структура таблицы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu.  

d>Ячейка 2.3</td></tr> <tr><td colspan="3">Ячейки 3.1 - 3.3</td></tr> </table> </body> </html>

Результат в браузере

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

Для вертикального объединения ячеек в тегах <TD> и <TH> используется атрибут rowspan. Его значением тоже является число, показывающее количество объединенных ячеек и также в столбце указывается меньшее количество тегов ячеек.

Пример объединения ячеек по вертикали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Объединение ячеек в HTML-таблице</title> </head> <body>  <table border="2">  <tr><td rowspan="2">Ячейки 1.1 и 2.1</td><td>Ячейка 1.2</td></tr>  <tr><td>Ячейка 2.2</td></tr>  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td></tr>  </table>  </body> </html>

Результат в браузере

seodon.ru

Создание таблиц в HTML


  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы <colgroup> и <col>
  • 7. Группировка разделов таблицы <thead>, <tbody> и <tfoot>
  • 8. Как объединить ячейки таблицы
  • 9. Атрибуты элементов таблицы
  • 10. Пример создания таблицы

1. Как создать таблицу

Таблица создаётся при помощи парного тега <table></table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него. Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:

<table>  <tr><th>текст заголовка</th><th>текст заголовка</th></tr> <!--ряд с ячейками заголовков-->  <tr><td>данные</td><td>данные</td></tr> <!--ряд с ячейками тела таблицы-->  </table>
текст заголовка текст заголовка
данные данные

Рис.1. Внешний вид таблицы без форматирования css-свойствами

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

/* внешние границы таблицы серого цвета толщиной 1px */  table {border: 1px solid grey;}   /* границы ячеек первого ряда таблицы */  th {border: 1px solid grey;}  /* границы ячеек тела таблицы */  td {border: 1px solid grey;} 

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;}.

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */  table {width: 100%;}  /* задаст фиксированную ширину для таблицы */  table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right, ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.


2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега <tr>. Количество горизонтальных строк таблицы определяется количеством парных тегов <tr></tr>.

3. Как сделать ячейку заголовка столбца таблицы

Элемент <th> создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов <th></th>. Для элемента доступны атрибуты colspan, rowspan, headers.

<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  </table>

4. Как сделать ячейку тела таблицы

Элемент <td> создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги <td></td>, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек <td> должно быть равно количеству пар ячеек <th>. Для элемента доступны атрибуты colspan, rowspan, headers.


<table>  <tr><th>ячейка заголовка</th><th>ячейка заголовка</th></tr>  <tr><td>ячейка тела таблицы</td><td>ячейка тела таблицы</td></tr>  </table>

5. Как добавить подпись (заголовок) к таблице

Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.

<table>  <caption>Перечень продуктов</caption>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </table>

6. Группирование строк и столбцов таблицы


Элемент <colgroup> создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>.

Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>. С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента <col> доступен атрибут span, задающий количество столбцов для объединения.

<table>   <colgroup>   <col span="2" style="background:Khaki"><!-- С помощью этой конструкции задаем цвет фона для первых двух столбцов таблицы-->   <col style="background-color:LightCyan"><!-- Задаем цвет фона для следующего (одного) столбца таблицы-->   </colgroup>   <tr>   <th>№ п/п</th>   <th>Наименование</th>   <th>Цена, руб.</th>   </tr>   <tr>   <td>1</td>   <td>Карандаш цветной</td>   <td>20,00</td>   </tr>   <tr>   <td>2</td>   <td>Линейка 20 см</td>   <td>30,00</td>   </tr>  </table>

table_primer
Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов <col> и <colgroup>

7. Группировка разделов таблицы

Элемент <thead> создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами <tbody> и <tfoot> для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент <table>, после <caption> и <colgroup>, и перед <tbody>, <tfoot> и <tr> элементами. В пределах одной таблицы можно использовать один раз.

Элемент <tbody> группирует основное содержимое таблицы. Используется в сочетании с элементами <thead> и <tfoot>.

Элемент <tfoot> создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега <thead>, перед тегами <tbody> и <tr>.

<table>   <thead>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   </thead>  <tfoot>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>   </tr>  </tfoot>  <tbody>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>  </tbody>   </table>

Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают <thead> и <tfoot> как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

<table>   <tr>   <th>№ п/п</th>   <th>Наименование товара</th>   <th>Ед. изм.</th>   <th>Количество</th>   <th>Цена за ед. изм., руб.</th>   <th>Стоимость, руб.</th>   </tr>   <tr>   <td>1.</td>   <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>   </tr>   <tr>   <td>2.</td>   <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>   </tr>   <tr>   <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td><!-- Задаем количество ячеек по горизонтали для объединения-->   </tr>  </table>
table_primer2
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы
Атрибут Описание, принимаемое значение
colspan Количество ячеек в строке для объединения по горизонтали.
<td colspan="3">
Возможные значения: число от 1 до 999.
headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
<th id="идентификатор">...</th>
<th headers="идентификатор">...</th>

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id.
rowspan Количество ячеек в столбце для объединения по вертикали.
<td rowspan="2">
Возможные значения: число от 1 до 999.
span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.
<col span="2">
Принимаемые значения: любое целое положительное число.

10. Пример создания таблицы

table-html
Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Разметка HTML

<table>   <caption>Меню ресторана "Ромашка"</caption>    <tr>   <th rowspan="2" class="first">Кухня</th>   <th colspan="2">Холодные блюда</th>   <th colspan="2">Горячие блюда</th>   <th rowspan="2">Десерты</th>   </tr>   <tr>   <td class="first">Салаты</td>   <td class="first">Закуски</td>   <td class="first">Первые блюда</td>   <td class="first">Вторые блюда</td>   </tr>   <tr>   <td rowspan="3" class="first">Русская</td>   <td>Винегрет</td>   <td>Язык с хреном</td>   <td>Щи с квашеной капустой</td>   <td>Вареники с картошкой</td>   <td>Печеные яблоки с медом</td>   </tr>   <tr>   <td>Оливье</td>   <td>Студень говяжий</td>   <td>Рассольник домашний</td>   <td>Караси запеченые в сметане</td>   <td>Блинчатый пирог</td>   </tr>   <tr>   <td>Сельдь под "шубой"</td>   <td>Судак заливной</td>   <td>Мясная солянка</td>   <td>Котлеты "Пожарские"</td>   <td>Пирожное "Картошка"</td>   </tr>   <tr>   <td rowspan="3" class="first">Испанская</td>   <td>Севиче из гребешков</td>   <td>Эмпанадас</td>   <td>Хлебный суп с чесноком</td>   <td>Паэлья с морепродуктами</td>   <td>Чуррос</td>   </tr>   <tr>   <td>Тимбал из авокадо и тунца</td>   <td>Ахотомате</td>   <td>Астурийская фабада</td>   <td>Свиное раксо</td>   <td>Альмойшавена</td>   </tr>   <tr>   <td>Фасоль с ветчиной</td>   <td>Чанфайна</td>   <td>Рыбный суп с манными клецками </td>   <td>Тортилья картофельная</td>   <td>Бунуэлос</td>   </tr>   <tr>   <td rowspan="3" class="first">Французская</td>   <td>Вогезский салат</td>   <td>Рийет из курицы</td>   <td>Баклажанный крем-суп "Ренуар"</td>   <td>Картофель огратен</td>   <td>Бриоши</td>   </tr>   <tr>   <td>Салат "Панзанелла"</td>   <td>Делисьез из сыра</td>   <td>Французский тыквенный суп</td>   <td>Гратин из птицы</td>   <td>Лигурийский лимонный пирог</td>   </tr>   <tr>   <td>Тар-тар</td>   <td>Маринованный лосось</td>   <td>Суп "Конти"</td>   <td>Тартифлетт</td>   <td>Саварен "Триумф"</td>   </tr>   </table>

Стили CSS

body {   margin: 0;   background: #F4F1F8;  }  table {   border-collapse: collapse;    line-height: 1.1;   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;   background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);   color: #0C213B;  }  caption {   font-family: annabelle, cursive;   font-weight: bold;   font-size: 2em;   padding: 10px;    color: #F3CD26;   text-shadow: 1px 1px 0 rgba(0,0,0,.3);   }  caption:before, caption:after {   content: "274B";   color: #A9E2CC;   margin: 0 10px;  }  th {   padding: 10px;    border: 1px solid #A9E2CC;  }  td {   font-size: 0.8em;   padding: 5px 7px;   border: 1px solid #A9E2CC;  }  .first {   font-size: 1em;   font-weight: bold;   text-align: center;  }

html5book.ru

Атрибут colspan.

Атрибут colspan используется для объединения ячеек по горизонтали. В значении атрибута указывается число ячеек объединяемых в одну.

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

Объединение ячеек таблицы html

Пояснения к коду:
Верхняя строка &lttr&gt имеет одну ячейку &lttd&gt, для которой прописан атрибут colspan со значением 2. Это значит, что данная ячейка объединяет в себе 2 ячейки, соответственно эта ячейка заменяет 2 ячейки. Вторая строка &lttr&gt имеет 2 обычные ячейки &lttd&gt.
Получается, что в верхней строке у нас две объединенных между собой ячейки, а в нижней строке две обычные ячейки. Количество равное, значит код написан верно.

Теперь пример кода с распространенной ошибкой:

Объединение ячеек таблицы html

Пояснения к коду:
Ошибка в том, что первая строка &lttr&gt содержит не две ячейки &lttd&gt, а три, в то время как вторая строка &lttr&gt содержит две ячейки &lttd&gt.
Смотря на код, визуально кажется, что количество ячеек в строках одинаковое, так как кол-во тегов &lttd&gt одинаковое. Но один из тегов &lttd&gt имеет атрибут colspan со значением 2, это значит, что эта одна ячейка занимает место двух.

Атрибут rowspan.

Атрибут rowspan используется для объединения ячеек по вертикали. Принцип действия точно такой же как и у атрибута colspan.

Объединение ячеек таблицы html

Пояснения к коду:
Верхняя строка &lttr&gt имеет три ячейки &lttd&gt, для одной из них прописан атрибут rowspan со значением 3. Это значит, что данная ячейка объединяет в себе 3 ячейки (которой задан атрибут + 2 нижних ячейки по вертикали). Как я уже сказал, первая строка имеет 3 ячейки, это значит, что и нижние две строки должны иметь тоже по три ячейки. Глядя на код, мы видим, что нижние две строки &lttr&gt имеют лишь по две ячейки &lttd&gt, но не стоит забывать, что первая ячейка верхней строки заняла свое место + еще место двух ячеек находящихся под ней. Это значит, что общее количество ячеек в каждой из отдельной строки равно трем.

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

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

htmlboss.ru

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

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

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

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

Далее, если нужно объединить две ячейки в верхней строке, используйте атрибут <b>colspan=" "</b> следующим образом:

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

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

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

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

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

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

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

Код:

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

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

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

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

www.internet-technologies.ru

Объединение ячеек таблиц

Объединение ячеек таблиц

Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10.

Листинг 5.10

<TABLE>

<TR>

<TD>1</TD>

<TD>2</TD>

<TD>3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

<TR>

<TD>6</TD>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

<TR>

<TD>11</TD>

<TD>12</TD>

<TD>13</TD>

<TD>14</TD>

<TD>15</TD>

</TR>

<TR>

<TD>16</TD>

<TD>17</TD>

<TD>18</TD>

<TD>19</TD>

<TD>20</TD>

</TR>

</TABLE>

Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.

А теперь рассмотрим таблицу на рис. 5.3.

Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?

Специально для этого теги <TD> и <TH> поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.

Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению

Рис. 5.3. Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)

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

1. Найти в коде HTML тег <TD> (<TH>), соответствующий первой из объединяемых

ячеек (если считать ячейки слева направо).

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

3. Удалить теги <TD> (<TH>), создающие остальные объединяемые ячейки данной строки.

Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.

Листинг 5.11

<TR>

<TD>1</TD>

<TD COLSPAN=»2″>2 + 3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.

Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.

1. Найти в коде HTML строку (тег <TR>), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).

2. Найти в коде этой строки тег <TD> (<TH>), соответствующий первой из объединяемых ячеек.

3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.

4. Просмотреть последующие строки и удалить из них теги <TD> (<TH>), создающие остальные объединяемые ячейки.

Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).

Листинг 5.12

<TR>

<TD ROWSPAN=»2″>1 + 6</TD>

<TD COLSPAN=»2″>2 + 3</TD>

<TD COLSPAN=»2″>4 + 5</TD>

</TR>

<TR>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

Обратим внимание, что мы удалили из второй строки тег <TD>, создающий шестую ячейку, поскольку она объединилась с первой ячейкой.

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

Что дальше?

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

В следующей главе мы познакомимся со средствами навигации по Web-сайту. Это всевозможные гиперссылки, как текстовые, так и графические (изображения- гиперссылки и карты-изображения). И наконец-то объединим разрозненные Web- странички в единый Web-сайт!

wm-help.net

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Неправильное использование colspan</title>  </head>  <body>  <table border="1" cellpadding="5" width="100%">  <tr>  <td colspan="2">Ячейка 1</td>  <td>Ячейка 2</td>  </tr>  <tr>  <td>Ячейка 3</td>  <td>Ячейка 4</td>  </tr>  </table>  </body> </html>

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

Рис. 12.5

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Объединение ячеек</title>  </head>  <body>  <table border="1" cellpadding="4" cellspacing="0">  <tr>  <td rowspan="2">Браузер</td>  <th colspan="2">Internet Explorer</th>  <th colspan="3">Opera</th>  <th colspan="2">Firefox</th>  </tr>  <tr>  <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>  </tr>  <tr align="center">  <td>Поддерживается</td>  <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>  </tr>  </table>  </body> </html>

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

Рис. 12.6

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

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

htmlbook.ru

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

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

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

Давайте теперь создадим следующую таблицу:
Таблица с объединением ячеек по вертикали

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

<table>  <tr>  <td rowspan="2">1</td>  <td>2</td>  <td>3</td>  </tr>  <tr>  <td>4</td>  <td>5</td>  </tr> </table>

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

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

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

Таблица с объединением столбцов и строк

Что? Читаешь дальше, даже не попытавшись? А ну давай пробуй, слабак!

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

<table>  <caption>Размер акцизного сбора на дизельное топливо</caption>  <tr>  <th rowspan="2">Продукция</th>  <th colspan="3">Налоговая ставка</th>  </tr>  <tr>  <th>c 01.01 по 31.01.2015</th>  <th>c 01.01 по 31.01.2016</th>  <th>c 01.01.2015</th>  </tr>  <tr>  <th>Дизельное топливо</th>  <td>3450 руб. за 1 тонну</td>  <td>4150 руб. за 1 тонну</td>  <td>3950 руб. за 1 тонну</td>  </tr> </table>

webshake.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.