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

Вложенные таблицы

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

Пример создания вложенных таблиц в 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>
 <table border="3">
  <tr>
   <td>Ячейка 1.1</td>
   <td colspan="3">Ячейки 1.2 - 1.4</td>
  </tr>

  <tr>
   <td>Ячейка 2.1</td>
   <td colspan="2" rowspan="2">Ячейки 2.2, 2.3 и 3.2, 3.3</td>
   <td>Ячейка 2.4</td>
  </tr>

  <tr>
   <td>Ячейка 3.1</td>
   <td>
    <table border="2">
     <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
     <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
    </table>
   </td>
  </tr>

  <tr>
   <td colspan="4">Ячейки 4.1 - 4.4</td>
  </tr>
 </table>
 </body>
</html>

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

Ячейка 1.1Ячейки 1.2 - 1.4
Ячейка 2.1Ячейки 2.2, 2.3 и 3.2, 3.3Ячейка 2.4
Ячейка 3.1
Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейки 4.1 - 4.4

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

Естественно, когда браузер встречает вложенную таблицу, то проводит те же манипуляции и с ней. И пока он не закончит — основная таблица не будет показана. Конечно, если на странице мало информации, то все это протекает практически мгновенно. Но вот когда на сайте много текста и графики (что и так замедляет загрузку), да еще и куча вложенных таблиц, то HTML-страница может грузиться на одну или несколько секунд дольше только из-за них. Вот так!

Зато по той же, указанной выше, причине рекомендую вам разбивать HTML-документ на несколько таблиц, а не пихать всю страницу в одну. Например, верх страницы — одна таблица, центр — вторая, низ — третья. Тогда браузер будет отображать таблицы по мере обработки, и пользователи будут видеть, что загрузка происходит, а не сидеть перед экраном и гадать: грузится — не грузится. Ведь они этого ох как не любят, думаю, по себе знаете. :)

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

  1. Посмотрите на результат примера и постарайтесь повторить.
  2. Обратите внимание, что логотип страницы сделан изображением-ссылкой.
  3. И еще: левая и правая колонки меню имеют нефиксированную ширину, то есть при уменьшении размеров страницы, они тоже пропорционально уменьшаются.
Объединение ячеек таблицы← Содержание →Нумерованные и маркированные списки
Учебник HTML