<!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, да и вообще вертикальное объединение ячеек — будь оно неладно! Так что вы не одиноки. :)

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

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

Ответы:

  1. Ссылки (<A>) и изображения (<IMG>) относятся к встроенным (уровня строки) элементам, а вот фоновые изображения вообще не являются элементами, они только фон и не более. Таблицы (<TABLE>) — это блочные элементы, а <STYLE> не относится ни к блочным, ни к встроенным — он может указываться только внутри <HEAD> и служит для подключения стилей (CSS).

  2. Тег <BODY> может содержать блочные и не может встроенные элементы. <TABLE> может содержать только специальные теги создания таблиц, которые не относятся к блочным или встроенным элементам, например теги <TR>. А вот ячейки таблиц (<TD>, <TH>) могут содержать и блочные, и встроенные теги.

  3. Несколько значений атрибута style надо писать через точку с запятой (;).

  4. Для описанной таблицы, указанная в тегах ширина ячеек должна быть по 250px, так как браузер всегда прибавляет к ширине значения cellspacing и cellpadding. В нашем случае это три раза по 20-ть пикселей и четыре по 10-ть — в сумме 100px. А вот реальная ширина ячеек будет по 270px, так как cellpadding расширяет именно ячейки, в отличие от cellspacing, который изменяет расстояния между ячейками.

  5. Если содержимое ячейки (будь то текст или картинка) не помещается в заданные размеры, то браузеры их игнорируют и увеличивают до нужных, чтобы содержимое все-таки вместилось. В нашем случае ширина ячейки станет равна 200 пикселей.

Вернуться в урок → Перейти к следующему уроку