Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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 colspan="2">Ячейки 1.1 и 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  <tr><td colspan="3">Ячейки 3.1 - 3.3</td></tr>
 </table>
 
</body>
</html>

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Объединение по вертикали и горизонтали</title>
</head>
<body>

 <table border="2">
  <tr><td colspan="2" rowspan="2">Ячейки 1.1, 1.2 и 2.1, 2.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.3</td></tr>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>
 
 </body>
</html>

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

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

Домашнее задание.

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

  1. Посмотрите результат задания и полностью повторите.

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

  1. К какому типу HTML-элементов относятся ссылки, изображения, таблицы и тег <STYLE>?
  2. Какие типы тегов могут и не могут содержать элементы <BODY>, <TABLE> и ячейки таблицы?
  3. Если в одном теге используется несколько разных значений атрибута style, то как их надо указывать?
  4. Если таблица состоит из двух одинаковых столбцов, браузер определил ее ширину, как равную 600px, при этом cellspacing="20", а cellpadding="10", то чему равна указанная в тегах ширина ячеек и их реальная ширина?
  5. Что произойдет, если в ячейку таблицы шириной 100 пикселей поместить изображение шириной 200 пикселей?
Границы, рамки и отступы HTML-таблиц← Содержание →Вложенные таблицы
Учебник HTML