ГЛАВА 5. Таблицы

ГЛАВА 5. Таблицы

В предыдущих главах мы узнали, как структурировать и оформлять текст и как помещать на Web-страницу графические изображения, аудио- и видеофайлы. Этих знаний хватит для создания большинства Web-страниц. Но не всех.

Что часто встречается в печатных изданиях, помимо текста и картинок? Таблицы! Таблицами пестрят учебники и справочники, таблицы часто попадаются в газетах и журналах, даже художественные произведения иногда огорошивают нас таблицами. И это понятно. Таблицы — лучший способ уместить множество сведений на ограниченной площади страницы.

Предоставляет ли HTML средства для создания таблиц? Да, и уже довольно давно. Сейчас мы с ними познакомимся.

Создание таблиц

Таблицы HTML создаются в четыре этапа.

На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:

<TABLE>

</TABLE>

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

На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> (листинг 5.1).

Листинг 5.1

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег создает обычную ячейку, а тег — ячейку заголовка, в которой будет помещаться "шапка" соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).

Листинг 5.2

<TABLE>

<TR>

<TH></TH>

<TH></TH>

<TH></TH>

</TR>

<TR>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

<TR>

<TD></TD>

<TD></TD>

<TD></TD>

</TR>

</TABLE>

На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).

Листинг 5.3

<TABLE>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

<TH>Столбец 3</TH>

</TR>

<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> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.

Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом (Листинг 5.4).

Листинг 5.4

<TABLE>

.

<TR>

<TD>Ячейка <EM>1.1</EM></TD>

<TD>Ячейка <EM>1.2</EM></TD>

<TD>Ячейка <EM>1.3</EM></TD>

</TR>

.

</TABLE>

Еще мы можем поместить в ячейку графическое изображение:

<TD><IMG SRC="picture.jpg" ALT="Картинка в ячейке таблицы"></TD>

Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 5.5).

Листинг 5.5

<TD>

<H4>Это большой текст</H4>

<P>Это начало большого текста, представляющего собой содержимое ячейки таблицы.</P>

<P>Это продолжение большого текста, представляющего собой содержимое ячейки таблицы.</P>

<P><IMG SRC="picture.jpg" ALT="Иллюстрация к большому тексту"></P>

<P>А это <STRONG>долгожданное окончание</STRONG> большого текста.</P>

</TD>

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

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

Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.

— Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).

— Размеры таблицы и ее ячеек делаются такими, чтобы полностью вместить их содержимое.

— Между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ.

— Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.

— Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.

Таблица — всего лишь содержимое Web-страницы, а за ее вывод "отвечает" представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II.

И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.

— Тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержи- мое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет да- лее) будет проигнорировано.

— Теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое содержимое тега <TR> будет проигнорировано.

— Содержимое таблицы может находиться только в тегах <TD> и <TH>.

— Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web- обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал &nbsp;).

Все, с теорией покончено. Настала пора практики. Давайте поместим на 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>&quot;Очищен&quot; от устаревших тегов</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-страницы) как пожелаем.

Данный текст является ознакомительным фрагментом.



Поделитесь на страничке

Похожие главы из других книг:

Глава 7 Введение в таблицы стилей и язык CSS

Из книги автора

Глава 7 Введение в таблицы стилей и язык CSS 7.1. Встраивание CSS в HTML7.2. Синтаксис CSS7.3. Селекторы7.4. Псевдоэлементы и псевдоклассы7.5. Правило @media7.6. Правила!important7.7. Правило @imporВ этой главе вы изучите основы языка CSS. Вы увидите, насколько легко разрабатываются таблицы стилей. Для


9.4. Таблицы

Из книги автора

9.4. Таблицы Таблицы – одно из главных средств расположения элементов на странице. Они позволяют расположить меню рядом с текстом и могут подстраиваться под монитор компьютера


ГЛАВА 5. Таблицы 

Из книги автора

ГЛАВА 5. Таблицы  В предыдущих главах мы узнали, как структурировать и оформлять текст и как помещать на Web-страницу графические изображения, аудио- и видеофайлы. Этих знаний хватит для создания большинства Web-страниц. Но не всех.Что часто встречается в печатных изданиях,


ГЛАВА 5. Таблицы

Из книги автора

ГЛАВА 5. Таблицы В предыдущих главах мы узнали, как структурировать и оформлять текст и как помещать на Web-страницу графические изображения, аудио- и видеофайлы. Этих знаний хватит для создания большинства Web-страниц. Но не всех.Что часто встречается в печатных изданиях,


1.8. Таблицы

Из книги автора

1.8. Таблицы Таблицы помещаются в тексте в порядке ссылки на них по окончании того абзаца, в котором таблица была впервые упомянута. Они нумеруются арабскими цифрами внутри каждого раздела. В правом верхнем углу таблицы над заглавием записывают слово «Таблица » и


Таблицы

Из книги автора

Таблицы Если для обычного документа таблица – это элемент оформления, без которого при желании можно обойтись (во всяком случае таблицы, как правило, не являются основой обычных документов), то для веб-страницы значение таблиц сложно переоценить. Правда, в последнее


Глава 4 Текст и таблицы

Из книги автора

Глава 4 Текст и таблицы • Работа с текстом• Создание и изменение таблиц• РезюмеЦель этой главы – освоение принципов работы c текстом и таблицами в AutoCAD 2010. В ней рассмотрены следующие основные понятия: создание и редактирование однострочного и многострочного текста,


Глава 5 Таблицы

Из книги автора

Глава 5 Таблицы 5.1. Создание таблиц Работа с таблицами не является основным предназначением Microsoft Word. Однако иногда в документ требуется вставить данные, которые лучше воспринимаются именно в виде таблицы. Если таблица несложная, использовать специальные программы для


Глава 7. Хеширование и хеш-таблицы

Из книги автора

Глава 7. Хеширование и хеш-таблицы В главе 4 были рассмотрены алгоритмы поиска элемента в массиве (например, TList) или в связном списке. Наиболее быстрым из рассмотренных методов был бинарный поиск, для выполнения которого требовался отсортированный контейнер. Бинарный


ГЛАВА 16. Таблицы.

Из книги автора

ГЛАВА 16. Таблицы. В терминологии SQL-89 и SQL-92 таблицы Firebird являются постоянными базовыми таблицами. Эти стандарты определяют некоторые другие типы, включая просматриваемые таблицы, которые Firebird реализует в виде просмотров (view, см. главу 24), и производные таблицы (derived tables),


Глава 16 Электронные таблицы OOo Calc

Из книги автора

Глава 16 Электронные таблицы OOo Calc 16.1. Немного о программе OOo Calc (Электронные таблицы) — это вторая наряду с OOo Writer часто используемая программа из пакета OpenOffice (рис. 16.1). Программа походит на Microsoft Excel, поэтому с ней работать сможет любой, кто хотя бы раз видел старый добрый


Глава 4 Текст и таблицы

Из книги автора

Глава 4 Текст и таблицы Работа с текстомСоздание и изменение таблицРезюмеЦель этой главы – освоение принципов работы c текстом и таблицами в AutoCAD 2009. В ней рассмотрены следующие основные понятия:• управление отображением текста с помощью стилей и шрифтов;• создание и


Глава 10 Электронные таблицы

Из книги автора

Глава 10 Электронные таблицы ? Ввод и редактирование данных.? Форматирование ячеек.? Создание диаграмм.В пакет Microsoft Office входит редактор электронных таблиц, программа создания презентаций, а также инструменты для создания диаграмм, которые часто требуются в офисной