— Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал ).
Все, с теорией покончено. Настала пора практики. Давайте поместим на Web- страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.
Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.
Листинг 5.6
.
Пожалуй, ни убавить ни прибавить…
Список версий HTML:
Версия HTML | Год выхода | Особенности |
---|
1.0 | 1992 | Официально не была стандартизована |
2.0 | 1995 | Первая стандартизованная версия |
3.2 | 1997 | Поддержка таблиц и графики |
4.0 | 1997 | "Очищен" от устаревших тегов |
4.01 | 1999 | В основном, исправление ошибок |
5.0 | ? | В разработке |
HTML позволяет формировать на Web-страницах следующие элементы:
.
Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).
Рис. 5.1. Таблица — список версий HTML на Web-странице index.htm
Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.
Заголовок и секции таблицы
Теперь рассмотрим дополнительные возможности HTML по созданию таблиц. На практике они применяются нечасто, но иногда могут пригодиться.
Прежде всего, с помощью парного тега
мы можем дать таблице заголовок. Текст заголовка помещают внутрь этого тега, который, в свою очередь, находится внутри тега (листинг 5.7).Листинг 5.7
Это таблицаСтолбец 1 | Столбец 2 | Столбец 3 |
---|
.
Заголовок таблицы выводится над ней, а текст его выравнивается по центру таблицы. При желании мы можем его как-то оформить, воспользовавшись знакомыми нам по главе 3 тегами:
Это таблицаОбычно тег
помещается сразу после открывающего тега — так логичнее. Но не имеет значения, в каком месте HTML-кода таблицы он присутствует — заголовок все равно будет помещен Web-обозревателем над таблицей.Кроме того, мы можем логически разбить таблицу HTML на три значащие части — секции таблицы:
— секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее "шапку";
— секцию тела, где находятся строки таблицы, составляющие основные данные;
— секцию завершения со строками, формирующими "поддон" таблицы (обычно в "поддоне" располагают итоговые данные и различные примечания).
Секцию заголовка таблицы формирует тег , секцию тела —
, а секцию завершения — . Все эти теги парные, помещаются непосредственно в тег и содержат теги , формирующие строки таблицы, которые входят в соответствующую секцию (листинг 5.8).Листинг 5.8
Столбец 1 | Столбец 2 | Столбец 3 |
---|
Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
Итог по ячейке 2.1 | Итог по ячейке 2.2 | Итог по ячейке 2.3 |
Секции таблицы Web-обозреватель никак не отображает и не выделяет на Web- странице. Они просто делят таблицу на три логические части. Однако мы можем задать для тегов, формирующих секции таблицы, какое-то представление, которое будет управлять их отображением. Подробнее об этом мы узнаем в части II.
НА ЗАМЕТКУ
Тег
поддерживает необязательный атрибут SUMMARY, с помощью которого мы можем задать примечание к таблице. Это примечание вообще не показывается на экране, однако может использоваться другими средствами вывода Web-страниц, например, Web-обозревателями для слабовидящих, зачитывающими содержимое Web- страниц. Так или иначе, примечание к таблицам практически никогда не задается.Чтобы закрепить полученные знания, давайте применим их к таблице — списку версий HTML, который мы недавно создали на Web-странице index.htm. Над этой таблицей мы вставили абзац с текстом "Список версий HTML: ", который так и просится в заголовки. Заодно разделим таблицу на секции заголовка и тела. ("Поддона" наша таблица не имеет, так что обойдемся без секции завершения.)
В листинге 5.9 представлен исправленный фрагмент HTML-кода Web-страницы index.htm, который создает эту таблицу.
Листинг 5.9
.
Пожалуй, ни убавить ни прибавить…
Список версий HTML:Версия HTML | Год выхода | Особенности |
---|
1.0 | 1992 | Официально не была стандартизована |
.
5.0 | ? |
Еще от автора Владимир Александрович Дронов
Наш сайт использует куки для сбора анонимной статистики.