seodon.ru | Объединение ячеек таблиц в 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>Объединение ячеек HTML-таблиц</title>
</head>
<body>

<p>Таблица №1</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td>Ячейка</td><td colspan="2">Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td colspan="2">Ячейка</td></tr>
 </table>

<p>Таблица №2</p>
 <table border="2">
  <tr><td rowspan="3">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td rowspan="2">Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
 </table>

<p>Таблица №3</p>
 <table border="2">
  <tr><td rowspan="3">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td rowspan="2">Ячейка</td></tr>
  <tr><td>Ячейка</td><td rowspan="3">Ячейка</td></tr>
  <tr><td rowspan="2">Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
 </table>


<p>Таблица №4</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td rowspan="3">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td><td>Ячейка</td></tr>
 </table>
 
<p>Таблица №5</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td rowspan="3">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td rowspan="3">Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
 </table>

<p>Таблица №6</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td rowspan="3">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td rowspan="3">Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td colspan="2">Ячейка</td></tr>
 </table>

<p>Таблица №7</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td rowspan="2">Ячейка</td><td>Ячейка</td><td>Ячейка</td><td rowspan="2">Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td colspan="4">Ячейка</td></tr>
 </table>
 
<p>Таблица №8</p>
 <table border="2">
  <tr><td>Ячейка</td><td colspan="2">Ячейка</td></tr>
  <tr><td>Ячейка</td><td rowspan="3">Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td colspan="3">Ячейка</td></tr>
 </table>

<p>Таблица №9</p>
 <table border="2">
  <tr><td colspan="4">Ячейка</td></tr>
  <tr><td>Ячейка</td><td colspan="2" rowspan="3">Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td>Ячейка</td><td>Ячейка</td></tr>
  <tr><td colspan="2">Ячейка</td><td colspan="2">Ячейка</td></tr>
 </table>

 </body>
</html>

Знаю-знаю, пришлось немного попотеть, сам в свое время «потел». Мне особенно тяжело давались варианты наподобие таблицы №3 и №9, да и вообще вертикальное объединение ячеек — будь оно неладно! Так что вы не одиноки. :)

Теоретическая часть.

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

Ответы:

Ссылки (<A>) и изображения (<IMG>) относятся к встроенным (уровня строки) элементам, а вот фоновые изображения вообще не являются элементами, они только фон и не более. Таблицы (<TABLE>) — это блочные элементы, а <STYLE> не относится ни к блочным, ни к встроенным — он может указываться только внутри <HEAD> и служит для подключения стилей (CSS).
Тег <BODY> может содержать блочные и не может встроенные элементы. <TABLE> может содержать только специальные теги создания таблиц, которые не относятся к блочным или встроенным элементам, например теги <TR>. А вот ячейки таблиц (<TD>, <TH>) могут содержать и блочные, и встроенные теги.
Несколько значений атрибута style надо писать через точку с запятой (;).
Для описанной таблицы, указанная в тегах ширина ячеек должна быть по 250px, так как браузер всегда прибавляет к ширине значения cellspacing и cellpadding. В нашем случае это три раза по 20-ть пикселей и четыре по 10-ть — в сумме 100px. А вот реальная ширина ячеек будет по 270px, так как cellpadding расширяет именно ячейки, в отличие от cellspacing, который изменяет расстояния между ячейками.
Если содержимое ячейки (будь то текст или картинка) не помещается в заданные размеры, то браузеры их игнорируют и увеличивают до нужных, чтобы содержимое все-таки вместилось. В нашем случае ширина ячейки станет равна 200 пикселей.

Вернуться в урок

→ Перейти к следующему уроку