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

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

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

Как вы знаете, за создание ячеек HTML-таблиц отвечают теги и , соответственно именно у них имеются атрибуты для объединения ячеек. Это colspan и rowspan .

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

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

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

       
Ячейки 1.1 и 1.2
Ячейка 1.3
 
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
 
Ячейки 3.1 - 3.3
 
  

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

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

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

       
Ячейки 1.1 и 2.1
Ячейка 1.2
 
Ячейка 2.2
 
Ячейка 3.1
Ячейка 3.2
 
  

Одновременно вертикальное и горизонтальное объединения

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

       
Ячейки 1.1, 1.2 и 2.1, 2.2
Ячейка 1.3
 
Ячейка 2.3
 
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
 
  

Объединение ячеек таблиц — довольно запутанная магия, поэтому ваше задание будет посвящено только этому.

Раз домашнее задание такое маленькое, то давайте опять проверим ваши теоретические знания.

1. К какому типу HTML-элементов относятся ссылки, изображения, таблицы и тег ?
2. Какие типы тегов могут и не могут содержать элементы , и ячейки таблицы?
3. Если в одном теге используется несколько разных значений атрибута style , то как их надо указывать?
4. Если таблица состоит из двух одинаковых столбцов, браузер определил ее ширину, как равную 600px, при этом cellspacing= «20» , а cellpadding= «10» , то чему равна указанная в тегах ширина ячеек и их реальная ширина?
5. Что произойдет, если в ячейку таблицы шириной 100 пикселей поместить изображение шириной 200 пикселей?

• Введение
• Что такое HTML?
• Теги и синтаксис HTML
• Атрибуты HTML-тегов
• Общие и текст
• Структура HTML-документа
• Параграфы и заголовки
• Как изменить шрифт?
• Меняем цвет текста и фона
• Выравнивание содержимого
• Цитаты и обрыв строки
• Что такое спецсимволы HTML?
• Горизонтальные линии
• Группирование элементов
• Комментарии в HTML
• Ссылки
• Cсылки и их разновидности
• Меняем цвета ссылок
• Ссылки на электронную почту
• Якоря — создаем закладки
• Изображения
• Изображения
• Изображения для фонов
• Изображения — ссылки
• Таблицы
• Таблицы
• Границы, рамки и отступы HTML-таблиц
• Объединение ячеек таблицы
• Вложенные таблицы
• Списки
• Нумерованные и маркированные списки
• Метатеги
• Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Источник

Объединение ячеек

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

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

 
содержимое
содержимое
 
содержимое
содержимое
 

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

 
содержимое
 
 
содержимое
содержимое
 

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

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

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

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

Источник

Атрибуты тега

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

bgcolor

colspan

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

Рис. 12.2. Пример таблицы, где используется горизонтальное объединение ячеек

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

height

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

rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной на рис. 12.3.

Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек

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

valign

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

width

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

Источник