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

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

Таблицы 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-страницы) как пожелаем.

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



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

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

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

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

Создание таблиц: <fo:table> Как можно догадаться из названия, элемент <fo:table> применяется для создания новой таблицы. Сама таблица состоит из необязательного заголовка, необязательного подстрочного примечания и одного или более тел таблицы (table body). Таблица из ячеек,


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

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

Создание таблиц Таблицы HTML создаются в четыре этапа.На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:<TABLE></TABLE>Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных


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

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

Создание таблиц Таблицы HTML создаются в четыре этапа.На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:<TABLE></TABLE>Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных


Глава 17. СОЗДАНИЕ ТАБЛИЦ

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

Глава 17. СОЗДАНИЕ ТАБЛИЦ ВПЛОТЬ ДО ЭТОГО МЕСТА, МЫ ЗАПРАШИВАЛИ ТАБЛИЦЫ данных и выполняли команды по извлечению этих данных, считая, что эти таблицы уже были созданы кем - то до нас . Это действительно наиболее реальная ситуация, когда небольшое колличество людей создают


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

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

Создание и изменение таблиц Таблица представляет собой объект, который состоит из данных в виде строк и столбцов. Многие общие возможности электронной таблицы можно использовать в сочетании с таблицами


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

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

Создание таблиц Команда TABLE создает табличный объект: вставляет пустую таблицу в рисунок, начиная с указанной точки, или в определенную область с использованием стиля таблицы, количества строк, столбцов и размеров, которые вы назначаете.После запуска команды TABLE


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

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

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


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

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

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


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

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

Создание и изменение таблиц Таблица представляет собой объект, который состоит из данных в виде строк и столбцов. Многие общие возможности электронной таблицы можно использовать в сочетании с таблицами AutoCAD.При создании таблицы в программе AutoCAD сначала следует вставить


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

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

Создание таблиц Команда TABLE создает табличный объект: вставляет пустую таблицу в рисунок, начиная с указанной точки, или в определенную область с использованием стиля таблицы, количества строк, столбцов и размеров, которые вы назначаете. Для вызова команды TABLE нужно


2.8. Создание и редактирование таблиц

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

2.8. Создание и редактирование таблиц Таблицы являются неотъемлемой частью рефератов, курсовых и дипломных работ. Они позволяют подытожить материал и сделать его наглядным. Современный текстовый редактор Word предлагает очень удобные и гибкие возможности создания и


5.10. Создание и форматирование таблиц

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

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


Урок 7.3. Создание таблиц

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

Урок 7.3. Создание таблиц Режимы работы с таблицами Для работы с таблицами в базе данных используются следующие режимы.? Режим таблицы. Является универсальным: в нем можно просматривать, вводить и редактировать данные, создавать новые таблицы и изменять их структуру.


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

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

Создание таблиц Давайте создадим табличку (будете, например, расписание уроков детям писать, или распорядок дня, или…).Чтобы не запутаться, создадим новый файл. Помните как? Открываем Word, видим Документ 1 (если программа открыта, то Файл ? Открыть), сохраняем новый документ


Создание электронных таблиц

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

Создание электронных таблиц Чтобы понять принципы построения документов Excel, которые называются книгами, давайте создадим простую электронную таблицу.Запустите Excel (Пуск ? Все программы ? Microsoft Excel). В окне этого приложения появится чистый лист с ячейками. В книге Excel может