4.8. Таблицы
Таблица и все элементы, ее составляющие, находятся между стартовым тэгом “<table>” и его закрывающим двойником “</table>”. Таблица состоит из заголовка, реализуемого тэгом “<caption>”, группы столбцов, объявляемых с помощью тэгов “<col>” и “<colgroup>”, шапки и подвала, создаваемых тэгами “<thead>” и “<tfoot>”, соответственно, и группы строк, реализуемых тэгом “<tbody>”. Все остальные, более мелкие элементы таблицы размещаются уже внутри этих объектов.
Тэг <table> обладает достаточно обширным набором параметров, позволяющим устанавливать самые различные свойства таблицы.
У таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Ширину таблицы мы можем устанавливать явно. Выполняется эта установка с помощью необязательного параметра “width”. Этому параметру мы можем присвоить процентное соотношение или абсолютное значение количества пикселов.
Для описания таблицы часто применяется параметр “border”, с помощью которого явно указывается ширина границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, задающее ширину границы в пикселах. Если мы установим нулевое значение этого параметра, то граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.
Параметр “cellspacing” определяет размер в пикселах между отдельными ячейками страницы. Похожий параметр “cellpadding” устанавливает размер отступа содержимого ячейки от ее границы. Таким образом, cellspacing устанавливает отступ вне ячейки, a “cellpadding” — внутри ячейки.
С помощью уже знакомого нам параметра “align” у нас есть возможность задать горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: “left”, “center” и “right”, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.
В самом простом варианте создания таблицы мы объявляем саму таблицу с помощью тэга “<table>”, затем несколько строк, а внутри этих строк ячейки. Это самый простой способ, который не требует применения встроенных табличных объектов, упомянутых выше.
<html>
<head>
<title>Простейшая таблица</title>
</head>
</head>
<body>
<p>Это обычный текст</р>
<table border=5 cellpadding=7 cellspacing=10 align=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>
Листинг 1.20
Рисунок 65. Окно браузера с результатом отображения файла, приведенного в листинге 1.20.
В данном примере мы намеренно применили достаточно большие значения для толщины границы и отступов снаружи и внутри ячеек для того, чтобы наглядно продемонстрировать влияние этих параметров (см. рис. 65). Из листинга 1.20 видно, что строки таблицы объявляются парой тэгов “<tr>” и “</tr>”. Уже внутри этих тэгов мы описываем ячейки с помощью тэга “<td>” и его закрывающего двойника “</td>”, между которыми находится содержимое каждой конкретной ячейки. Сколько задано ячеек в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек определяется исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца больше по размерам, чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.
Возможна ситуация, когда создатель Web-страницы в различных строках объявит разное количество ячеек, но и тогда браузер сможет отобразить таблицу, как это показано в следующем примере (листинг 1.21 и рис. 66).
<html>
<head>
<title>Простейшая таблица</title>
</head>
<body>
<p>Это обычный текст</p>
<table border=2 align=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>10</td>
</tr>
</table>
</body>
</html>
Листинг 1.21
Рисунок 66. Окно браузера с.результатом отображения файла, приведенного в листинге 1.21.
Мы описали самый простой способ создания таблиц, когда в ее состав входят только основные строки. Все можно сделать немного тоньше, если использовать различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый с помощью тэга “<caption>”. Текст заголовка размещается между его стартовым тэгом и завершающим двойником “</caption>”. Тэг, объявляющий заголовок таблицы, обладает параметром “align”, позволяющим указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: “top”, “bottom”, “left” и “right”. Значение “top” заставляет браузер отображать заголовок таблицы над ней самой. Значение “bottom” перемещает заголовок под таблицу. Значения “left” и “right” устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается над таблицей. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тэга.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<p>Это.обычный текст</p>
<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>
Листинг 1.22
Рисунок 67. Окно браузера с.результатом отображения файла, приведенного в листинге 1.25.
В данном случае мы использовали значение “right” для параметра “align”. Таким образом, заголовок размещается над таблицей и занимает по горизонтали пространство не большее, чем сама таблица; его текст прижат к правой границе этого пространства. Все это показано на рисунке 67.
Как видно, заголовок таблицы, хоть и относится, строго говоря, к таблице, но отображается вне ее самой. Зато следующие три объекта, которые мы рассмотрим, являются составными частями таблицы.
В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Как правило, таблицы содержат и явно выделенную верхнюю часть, именуемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются тэгами “<thead>” и “<tfoot>” соответственно. Если мы применяем эти тэги в объявлении таблицы, то нам необходимо явно описывать и ту часть таблицы, в которой размещаются обычные данные. Это описание выполняется с помощью тэга “<tbody>”. Естественно, все три только что упомянутых тэга применяются обязательно в паре со своими закрывающими двойниками. Рассмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и отображение ее в браузере, благодаря использованию этих структурных элементов (листинг 1.23 и рис. 68).
<html>
<head>
<title>Ta6jmua</title>
</head>
<body>
<p>Это обычный текст</p>
<table border=2 align=left>
<caption >3аголовок таблицы</caption>
<thead>
<tr>
<td>Столбец 1</td><td>Столбкц 2</td><td>Cтoлбeц 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</tfoot>
</table>
</body>
</html>
Листинг1.23
Рисунок 68. Окно браузера с результатом отображения файла, приведенного в листинге 1.26
Из листинга видно, что содержимым всех рассматриваемых нами структурных частей таблицы по-прежнему являются строки, состоящие из отдельных ячеек.
Несмотря на кардинально изменившуюся структуру таблицы в коде HTML-документа, при отображении ничего принципиально нового не появилось. И это правильно, т. к. HTML старается передавать конкретные аспекты отображения на более низкий, детальный уровень иерархии объектов. Следовательно, если мы хотим, чтобы ячейки подвала, заголовка и тела таблицы отличались друг от друга по оформлению, мы должны либо самостоятельно установить эти правила отображения для каждой ячейки, либо воспользоваться стилевым оформлением.
Тем не менее, одно средство оформления все-таки встроено в эти тэги. С помощью параметров “align” и “valign” мы можем устанавливать выравнивание содержимого ячеек. Параметр “align” задает выравнивание содержимого ячеек данного раздела таблицы по горизонтали. В качестве значения этого параметра применяется одно из предустановленных ключевых слов. Рассмотрим их.
Значение “left” прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.
Значение “right” выравнивает любое содержимое ячейки по правому краю.
Значение “center” центрирует содержание ячеек, включенных в раздел, к которому применяется данный параметр. Используется по умолчанию для заголовков таблицы.
Значение, “justify” заставляет браузер отображать содержимое ячеек, равномерно растянув их по всей ширине ячейки.
Значение “char” применяется тогда, когда в ячейках раздела отображается числовая информация в финансовом формате и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и дробной части всех чисел находились на одном и том же уровне.
Теперь перейдем к параметру, позволяющему явно устанавливать вертикальное выравнивание содержимого ячеек, входящих в состав какого-либо блока таблицы. Он носит наименование “valign”. Как и у параметра горизонтального выравнивания, его значением может быть только одно ключевое слово из предопределенного набора.
Значение “top” прижимает содержимое ячеек к их верхним границам.
Значение “middle” центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Это значение используется по умолчанию.
Значение “bottom” прижимает содержимое ячеек к их нижним граням.
В стандарте HTML 4.1 существуют тэги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца применяется тэг “<col>”, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тэг “<colgroup>”.
Следует учитывать, что если мы используем эти тэги для объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе. То есть, нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление для поиска тэгов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тэгов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках.
С помощью тэга “<colgroup>” мы объявляем группу столбцов. Каждый столбец этой группы мы можем явно объявить, используя тэг “<col>”, но это делать необязательно, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается с помощью параметров тэга “<colgroup>”. К этому тэгу применимы параметры “align” и “valign”, которые мы рассматривали чуть ранее, с теми же возможными значениями. Кроме того, часто используются еще два параметра.
Параметр span показывает, какое количество столбцов находится в данной группе. Значением этого параметра может быть положительное целое число. По умолчанию используется единичное значение, т. е. в группу входит всего один столбец.
Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем задавать точное абсолютное значение в пикселах, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую для размещения содержимого ячеек, следует использовать конструкцию width=”0”.
Если мы хотим указать, что в таблице будет сорок столбцов, каждый шириной в двадцать пикселов, необходимо использовать следующий фрагмент кода:
<colgroup span=”40” width=”20”>
</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” позволяет регулировать горизонтальное выравнивание содержимого ячеек строки.
Параметр “valign” задает вертикальное выравнивание для содержимого ячеек строки.
Параметр “bgcolor” позволяет задавать цвет фона для ячеек, входящих в объявляемую строку.
Ячейки таблицы мы можем создавать не только с помощью тэга “<td>”, но и применяя тэг “<th>”. Тэг “<th>” предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов. В листинге 1.24 зан пример их использования.
<html>
<head>
<title>таблица</title>
</head>
<body>
<p>Это обычный текст</p>
<table border=2 align=left>
<caption>3аголовок таблицы</сарtion>
<thead>
<tr>
<th>Столбец 1</th><th>Столбец 2</th><th>Cтoлбeц 3</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
Листинг 1.24
Рисунок 69. Окно браузера с результатом отображения файла, приведенного в листинге 1.24.
В листинге, в так называемой "шапке" таблицы, мы объявили ячейки с помощью тэгов “<th>”, а на иллюстрации текстовое содержимое этих ячеек выделено полужирным шрифтом. Впрочем, из всех табличных объектов ячейки обладают, пожалуй, самым обширным набором параметров, который позволяет нам настраивать внешний вид каждой ячейки отдельно.
Параметр “rowspan” указывает, на сколько строк по вертикали растянута искомая ячейка. Благодаря этому параметру, мы имеем возможность объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для этого параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная с текущей до самой нижней ячейки.
Параметр “colspan” подобен только что рассмотренному параметру “rowspan”, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значение по умолчанию — единица, а нулевое значение объединяет ячейки, начиная с текущей и до конца строки таблицы.
Параметр “nowrap” применяется без каких-либо значений. Его присутствие в тэге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо располагать в одной строке, при необходимости увеличивая ширину ячейки для того, чтобы содержимое было отображено полностью.
Параметр “width” предназначен для указания рекомендованной ширины ячейки. Значением этого параметра является число, обозначающее ширину в пикселах или процентное соотношение. Если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, то ячейка принудительно растягивается до необходимого размера.
Параметр “height” используется для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром “width”.
Параметр “align” задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы.
Параметр “valign” предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе.
Параметр “dir” позволяет задавать направление отображения текста. В некоторых языках принято написание текстовой строки не слева направо, как мы привыкли, а справа налево, поэтому необходимо иметь возможность явно указывать направление вывода текста. Если отображаемый текст должен выводиться слева направо, следует использовать значение ltr, установленное по умолчанию, в противном случае применяется значение rtl.
<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=2 width=”100%”>
<caption >3аголовок таблицы</сарtion>
<thead>
<tr>
<th bgcolor=lime rowspan=2> </th><th>Столбец1</th>
<th>Столбец 2</th><th>Столбец 3</th>
</tr>
<tr>
<th со1span=2>0бъединенная ячeйкa</th><th>Cтoлбeц 3</th>
<tr>
</thead>
<tbody>
<tr>
<td width=100> </td><td>l</td><td>2</td><td>3</td>
</tr>
<tr>
<td> </td><td>4</td><td>5</td><td>6</td>
</tr>
</tbody>
</table>
</body>
</html>
Листинг 1.25
Рисунок 70. Окно браузера с результатом отображения файла, приведенного в листинге 1.25.
Теперь проанализируем, что у нас получилось. Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентах, поэтому все столбцы растянуты равномерно. Все, за исключением первого, т. к. для первой ячейки в третьей строке мы жестко установили ширину в сто пикселов, поэтому весь столбец у нас отображен с такой шириной. Во второй строке таблицы мы создали ячейку, объединяющую две соседние ячейки в текущей строке. На иллюстрации видно, что блок ячеек, сформированных с помощью тэга “<th>”, немного отделен по вертикали от основного блока таблицы, состоящего из ячеек, объявленных тэгом “<td>”. Кроме того, мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела.