Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Листинг 5.6
.
<P>Пожалуй, ни убавить ни прибавить…</P>
<HR>
<P>Список версий HTML:</P>
<TABLE>
<TR>
<TH>Версия HTML</TH>
<TH>Год выхода</TH>
<TH>Особенности</TH>
</TR>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD>Официально не была стандартизована</TD>
</TR>
<TR>
<TD>2.0</TD>
<TD>1995</TD>
<TD>Первая стандартизованная версия</TD>
</TR>
<TR>
<TD>3.2</TD>
<TD>1997</TD>
<TD>Поддержка таблиц и графики</TD>
</TR>
<TR>
<TD>4.0</TD>
<TD>1997</TD>
<TD>"Очищен" от устаревших тегов</TD>
</TR>
<TR>
<TD>4.01</TD>
<TD>1999</TD>
<TD>В основном, исправление ошибок</TD>
</TR>
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>В разработке</TD>
</TR>
</TABLE>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
.
Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).
Рис. 5.1. Таблица — список версий HTML на Web-странице index.htm
Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.
Заголовок и секции таблицы
Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.
Прежде всего, с помощью парного тега <CAPTION> мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега <TABLE> (листинг 5.7).
Листинг 5.7
<TABLE>
<CAPTION>Это таблица</CAPTION>
<TR>
<TH>Столбец 1</TH>
<TH>Столбец 2</TH>
<TH>Столбец 3</TH>
</TR>
.
</TABLE>
Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись знакомыми нам по главе 3 тегами:
<CAPTION><STRONG>Это таблица<STRONG></CAPTION>
Обычно тег <CAPTION> помещается сразу после открывающего тега <TABLE> — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.
Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
— секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее "шапку";
— секцию тела, где находятся строки таблицы, составляющие основные данные;
— секцию завершения со строками, формирующими "поддон" таблицы (обычно в "поддоне" располагают итоговые данные и различные примечания).
Секцию заголовка таблицы формирует тег <THEAD>, секцию тела — <TBODY>, а секцию завершения — <TFOOT>. Все эти теги парные, помещаются непосредственно в тег <TABLE> и содержат теги <TR>, формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).
Листинг 5.8
<TABLE>
<THEAD>
<TR>
<TH>Столбец 1</TH>
<TH>Столбец 2</TH>
<TH>Столбец 3</TH>
</TR>
</THEAD>
<TBODY>
<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>
</TBODY>
<TFOOT>
<TR>
<TD>Итог по ячейке 2.1</TD>
<TD>Итог по ячейке 2.2</TD>
<TD>Итог по ячейке 2.3</TD>
</TR>
</TFOOT>
</TABLE>
Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web- странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением. Подробнее об этом мы узнаем в части II.
НА ЗАМЕТКУ
Тег <TABLE> поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, например, Web-обозревателями для слабовидящих, зачитывающими содержимое Web- страниц. Так или иначе, примечание к таблицам практически никогда не задается.
Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом "Список версий HTML: ", который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ("Поддона" наша таблица не имеет, так что обойдемся без секции завершения.)
В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.
Листинг 5.9
.
<P>Пожалуй, ни убавить ни прибавить…</P>
<HR>
<TABLE>
<CAPTION>Список версий HTML:</CAPTION>
<THEAD>
<TR>
<TH>Версия HTML</TH>
<TH>Год выхода</TH>
<TH>Особенности</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>1.0</TD>
<TD>1992</TD>
<TD>Официально не была стандартизована</TD>
</TR>
.
<TR>
<TD>5.0</TD>
<TD>?</TD>
<TD>В разработке</TD>
</TR>
</TBODY>
</TABLE>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
.
Сохраним исправленную Web-страницу и откроем ее в Web-обозревателе. И сразу увидим, что текст "Список версий HTML" теперь выровнен по центру таблицы. Это и неудивительно — ведь мы превратили его в заголовок таблицы. Сама же таблица ничуть не изменилась (что тоже понятно — ведь ее секции Web-обозреватель никак не выделяет).
Объединение ячеек таблиц
Осталось поговорить об одной интересной особенности языка HTML. Это так называемое объединение ячеек таблиц. Лучше всего рассмотреть пример — простую таблицу, HTML-код которой приведен в листинге 5.10.
Листинг 5.10
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
</TABLE>
Это обычная таблица, ячейки которой пронумерованы — так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги <TD> и <TH> поддерживают два весьма примечательных необязательных атрибута. Первый — COLSPAN — объединяет ячейки по горизонтали, второй — ROWSPAN — по вертикали.
Рис. 5.2. Изначальная таблица, ячейки которой подвергнутся объединению
Рис. 5.3. Таблица, показанная на рис. 5.2, после объединения некоторых ячеек (объединенные ячейки обозначены сложением их номеров)
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег <TD> (<TH>), соответствующий первой из объединяемых
ячеек (если считать ячейки слева направо).
2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги <TD> (<TH>), создающие остальные объединяемые ячейки данной строки.
Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.
Листинг 5.11
<TR>
<TD>1</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD>4</TD>
<TD>5</TD>
</TR>
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег <TR>), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег <TD> (<TH>), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги <TD> (<TH>), создающие остальные объединяемые ячейки.
Нам осталось объединить ячейки 1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).
Листинг 5.12
<TR>
<TD ROWSPAN="2">1 + 6</TD>
<TD COLSPAN="2">2 + 3</TD>
<TD COLSPAN="2">4 + 5</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
</TR>
Обратим внимание, что мы удалили из второй строки тег <TD>, создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
Объединение ячеек сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна (о табличном Web-дизайне см. в главе 10), трудно было встретить таблицу без объединенных ячеек. Так или иначе, знать о нем не помешает.
Что дальше?
В этой главе мы познакомились со средствами
