Таблицы

Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам.
Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселов, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселов, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселов. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселов, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность.
Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.
Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <table> и его закрывающим близнецом </table>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <col> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов.
Сам тег <table> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.
Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселов, или воспользоваться процентным соотношением.
Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселах. Если мы установим нулевое значение этогс параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.
Параметр cellspacing позволяет устанавливать размер в пикселах между отдельными ячейками страницы. А похожий параметр cellpadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a cellpadding — внутри ячейки.
А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.
В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <table>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах" (рис. 1.24).

Листинг 1.25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=5 cellpadding=7 cellspacing=10 a,lign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном примере мы намеренно применили достаточно большие значения для толщины границы и отступов снаружи и внутри ячеек для того, чтобы максимально наглядно показать их действие. А из листинга примера видно, что строки таблицы объявляются при помощи пары тегов <tr> и </tr>. Уже внутри этих тегов мы объявляем ячейки при помощи тега<td> и его закрывающей пары </td>, между которыми и находится содержимое каждой конкретной ячейки. Как видно, сколько ячеек будет в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек будет определяться, исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца будет больше по размерам, чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.
Естественно, также возможна ситуация, когда создатель Web-страницы в различных строках объявит разное количество ячеек. Но и тогда браузер сможет отобразить таблицу, как это показано в следующем примере (рис. 1. 25).

Рис. 1.24. Окно браузера с результатом отображения файла, приведенного в листинге 1.25

Листинг 1.26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http : / /www . w3 . org/TR/htm!4 /strict . dtd">
<html>
<head>
<title>Простейшая таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 аlign=center>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>Длинная ячейка</td><td>l0</td>
</tr>
</table>
</body>
</html>

Рис. 1.25. Окно браузера с результатом отображения файла, приведенного в листинге 1.26

Но это был самый простой способ создания таблиц, когда в ее состав входят только основные строки. На самом деле возникает гораздо больше возможностей, если мы используем различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый при помощи тега <caption>. Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Значение top заставляет браузер отображать заголовок таблицы над ней самой. Значение bottom перемещает заголовок под таблицу. Значения left и right устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается сверху таблицы. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тега.

Листинг 1.27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный текст</р>
<table border=2 align=left>
<caption align=right> 3аголовок таблицы</сарtion>
<tr>
<td> 1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>

В данном случае мы использовали значение right два параметра align. Таким образом, заголовок отображается сверху таблицы, занимает по горизонтали пространство не больше, чем сама таблица, и текст прижат к правой границе этого пространства. Все это показано на рис. 1.26.

Рис. 1.26. Окно браузера с результатом отображения файла, приведенного в листинге 1.27

Как видно, заголовок таблицы, хоть и относится, строго говоря, к таблице, во отображается вне ее самой. Зато следующие три объекта, которые мы ршгсмотрим, являются составными частями таблицы.
В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Но ведь обычно таблицы содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot> соответственно. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbbdy>. Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками. Посмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и при отображении ее в браузере, с использованием этих структурных элементов (рис. 1.27).

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.4td">
<html>
<head>
<title>Таблица </title>
</head>
<body>
<р>Это обычный тёкст</р>
<table border=2 align=left>
<caption> 3аголовок таблицы</сарtion>
<thead>
<tr>
<td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</tbody>
tfoot>
<tr>
<td>5</td> <td>7</td> <td>9</td>
</tfoot>
</table>
</body>
</html>

 

Рис. 1.27. Окно браузера с результатом отображения файла, приведенного в листинге 1.28

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

  • Значение left прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.
  • Значение right выравнивает любое содержимое ячеек по правому краю.
  • Значение center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр. Используется по умолчанию для заголовков таблицы.
  • Значение justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки.
  • Значение char применяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате, и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и десятичной частей всех чисел находились на одном и том же уровне.

О последнем случае вообще стоит поговорить особо. Мы сказали, что выравниваться будут не столько сами числа, сколько их десятичные разделители. А какие символы будут считаться десятичными разделителями? Если для всего документа явно установлен язык текстового содержимого, то браузер сам поймет, какой символ считается десятичным разделителем. Но нет никакой гарантии, что мы для этих целей будем использовать именно тот символ, который распознается браузером. Поэтому у нас есть возможность самостоятельно явно указать, какой символ мы применяем для разделения целой и дробной частей чисел. Для этих целей используется параметр char, значением которого и является данный символ. К сожалению, данную возможность стандарта HTML поддерживают далеко не все браузеры.
Теперь перейдем к параметру, позволяющему явно устанавливать вертикальное выравнивание содержимого ячеек, входящих в состав какого-либо блока таблицы. Он носит наименование vaiign. Как и параметр горизонтального выравнивания, он в качестве значения может использовать только одно ключевое слово из заранее предопределенного набора.

  • Значение top прижимает содержимое ячеек к их верхним границам.
  • Значение middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию.
  • Значение bottom прижимает содержимое ячеек к их нижним граням.
  • Значение baseline имеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы, выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке. Напомню, что базовой линией текста называется невидимая линия, на которой и располагаются основания большинства символов применяемого алфавита. Но у некоторых символов, таких как "g" в латинском алфавите, или "р" — в русском, существуют так называемые "хвостики", которые уходят вниз за базовую линию.

При помощи рассмотренных нами блоков таблицы, мы можем структурировать ее содержимое и немного управлять отображением содержимого ячеек, входящих в эти блоки. Но что делать, если нам необходимо установить единые правила оформления для одного или нескольких столбцов таблицы? Как мы знаем, нам нет нужды объявлять их специально, так как столбцы монтируются из ячеек, входящих в строки. Но, тем не менее, в стандарте HTML 4.1 существуют теги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца используется тег <col>, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тег <coigroup>.
Следует осознавать, что если мы используем эти теги объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе, т. е. нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление на предмет нахождения тегов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тегов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках.
При помощи тега <colgroup> мы объявляем группу столбцов. Каждый столбец этой группы мы можем дополнительно явно объявить при помощи тега <col>, но это не обязательно делать, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается при помощи параметров тега<colgroup> . К этому тегу применимы параметры align и vaiign, которые мы рассматривали чуть ранее, с теми же возможными значениями. Помимо этого чаще всего применяется еще два параметра.

  • Параметр span показывает, какое количество столбцов будет находиться в данной группе. Значением данного параметра является положительное целое число. По умолчанию используется единичное значение, т. е. в группу по умолчанию входит всего один столбец.
  • Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем устанавливать точное абсолютное значение в пикселах, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую, чтобы вместить содержимое ячеек, следует использовать конструкцию width="0*".

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

<colgroup span="40" width=*H20"> </colgroup>

Только никогда не следует забывать о том, что нам никогда заранее неизвестно, какое разрешение экрана будет у пользователя, загружающего нашу Web-страницу.
Отдельный столбец, входящий в группу, объявляется при помощи тега <col>. Этот тег обладает тем же .набором параметров, что и рассмотренный нами только что тег <colgroup>. Вот только параметр span здесь имеет несколько иное значение. Как мы знаем, некоторые ячейки, могут объединять сразу несколько ячеек из соседних столбцов. А теги <col> могут создавать столбцы, которые на самом деле будут состоять из нескольких столбцов, т. е. одна ячейка такого столбца может состоять из нескольких тегов <td>. Значение параметра span как раз и указывает, сколько именно столбцов будут объединяться в одном. Приведем пример использования данного параметра.
Если нам необходимо создать таблицу с тремя столбцами, стоит в код HTML-документа вставить следующую конструкцию:

<table>
<colgroup> <col>
<col span="2"> </colgroup>
<tr>
<td> .. . ...Определение строк...
</table>

Между тегами <colgroup> и </colgroup> мы вставили два тега <col>. Легко заметить, что это просто объявляющие теги, которые не требуют использования закрывающей пары для себя. В данном фрагменте мы создали таблицу с тремя столбцами. Первый столбец объявлен при помощи первого тега <col>, а вторые два столбца объединены в единую группу при помощи второго тега <col> с параметром span, значение которого установлено в "два".
Мы знаем, как объявлять столбцы. Но после объявления столбцов мы все равно переходим к заполнению таблицы, и там уже без тегов, создающих строки, не обойтись. Из предыдущих примеров мы видели, что строки создаются при помощи пары тегов <tr> и </tr>, между которыми находятся теги, объявляющие отдельные ячейки. Тег <tr>, естественно, обладает целым рядом параметров, которые, тем не менее, нам уже знакомы. Помимо всеобщих параметров идентификации, есть и параметры, регулирующие отображение информации, находящейся в ячейках, входящих в данную строку. Перечислим их.

  • Параметр align позволяет регулировать горизонтальное выравнивание содержимого ячеек строки.
  • Параметр vaiign задает вертикальное выравнивание для содержимого ячеек строки.
  • Параметр bgcolor позволяет задавать цвет фона для ячеек, входящих в строку.

Сами ячейки мы можем создавать не только при помощи тега <td>, но и при помощи тега <th>. Тег <th> предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов. В следующем листинге показан пример их использования (рис. 1.28).

Листинг 1.28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<р>Это обычный текст</р> <table border=2 align=left> <caption >3аголовок <thead> <tr>
<th> Столбец K/thxth>CTon6eu 2</thxth>CTon6eu 3</th> </tr> </thead> <tbody>
<tr> ..
<td>l</td> <td>2</td> <td>3</td> </tr> <tr>
<td>4</td> <d>5</td> <td>6</td> </tr>
</tbody>
</table>
</body>
</html>

Рис. 1.28. Окно браузера с результатом отображения файла, приведенного в листинге 1.29

Из листинга видно, что в так называемой "шапке" таблицы, мы объявили ячейки при помощи тегов <th>. На иллюстрации текстовое содержимое этих ячеек выделено полужирным шрифтом. Впрочем, ячейки обладают, пожалуй, самым обширным набором параметров из всех табличных объектов, которые позволяют нам настраивать внешний вид для каждой ячейки по отдельности

  • Параметр rowspan указывает, на сколько строк по вертикали растянута искомая ячейка. При помощи этого параметра мы имеем возможность объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для данного параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная от текущей до самой нижней ячейки.
  • Параметр colspan подобен только что рассмотренному параметру rowspan, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значением по умолчанию является единица, а нулевое значение объединяет ячейки, начиная от текущей и до конца строки таблицы.
  • Параметр no wrap применяется без каких-либо значений. Его присутствие в теге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо отображать в одной строке, не разбивая на несколько, если длины ячейки для этого недостаточно. В подобных случаях, если единственная строка текстового содержимого по ширине больше, чем сама ячейка, ширина ячейки будет увеличена, чтобы содержимое было отображено полностью.
  • Параметр width предназначен для указания рекомендованной ширины ячейки. Значением Данного параметра является число, обозначающее ширину в пикселах, процентное или кратное соотношение. В том случае, однако, если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, та будет принудительно растянута до необходимого размера.
  • Параметр height предназначен для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром width.
  • Параметр align задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы.
  • Параметр vaiign предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе.
  • Параметр dir позволяет задавать направление отображения текста. Так как некоторые языки предполагают написание слов не слева направо, как привыкли мы, а справа налево,, необходимо иметь возможность явно указывать, куда направлен порядок чтения. Если отображаемый текст должен читаться слева направо, следует использовать значение LTR, установленное по умолчанию. Если текст доложен читаться справа налево, то используется значение RTL.

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

Листинг 1.30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www, w3.org/TR/html4 /strict. dtd">
<html> <head>
</head>
<body>
<table border=2 width="100%"> <caption >3аголовок таблицы</сар^оп> <thead> -о
<th bgcolor=Xime rowspan=2>snbsp;<yth><"th> Столбец K/th><th>CT<Mi6eu 2</th><th>CTCMi6eu 3</th>
</tr>
<tr>
<th соlspаn=2>Объединенная ячейка
3</th>
</thead> <tbody>
V<tr> .
<td width=100>&nbsp; </td><td>K/td><td>2</td><td>3</td> </tr>
<tr>
<td>&nbsp; </tdxtd>4</td><td>5</td><td>6</td> </tr>
</tbody>
</table>
</body>
</html>

Рис. 1.29. Окно браузера с результатом отображения файла, приведенного в листинге 1.30

Теперь посмотрим, что у нас получилось (рис. 1.29). Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентном соотношении, поэтому все столбцы были растянуты равномерно. Все, за исключением первого, так как . для первой ячейки в третьей строке мы жестко задали ширину в сто пикселов. Поэтому весь столбец у нас отображался с такой шириной. А во второй строке таблицы мы создали ячейку, объединяющую сразу две соседние ячейки в текущей строке. Также на иллюстрации видно, что блок ячеек, созданных при помощи тега <th> немного отделен по вертикали от основного блока таблицы, созданного при помощи ячеек, объявленных тегом <td>. Также мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела. Сделано это не случайно. Дело в том, что браузер Netscape Navigator ранних версий неадекватно отображает столбцы таблиц, в которых нет содержимого. Поэтому следует взять за правило вставлять неразрывные пробелы в пустые ячейки таблиц.
Вообще, прием установки процентного соотношения ширины таблицы и жесткого задания ширины первого столбца широко применяется в Web-дизайне. Обычно меню навигации по сайту размещается в левой части экрана. Поэтому Web-дизайнер обычно заключает все содержимое страницы в одну большую таблицу с двумя ячейками. Ширина левой ячейки задается жестко в пикселах, а все остальное пространство окна просмотра отдается под отображение основного содержимого страницы. При этом, если это содержимое тоже имеет жесткую структуру, то его тоже можно поместить в таблицу, которая вся будет размещаться в одной ячейке первичной таблицы. Следует лишь аккуратно относиться к созданию вложенных таблиц, так как ранние версии браузера Netscape Navigator при обилии таблиц, вложенных друг в друга, могут просто зависать.