Вы уже научились создавать web-страницы, форматировать тестовый контент, вставлять на web-страницы изображения, создавать списки, связывать странички с помощью текстовых и графических гиперссылок. На этом занятии вы научитесь создавать таблицы.
Таблица – это один из наиболее удобных способов представления и упорядочивания больших объёмов данных. Таблицы упрощают восприятие такой информации, как, например: расписание, статистические данные, результаты исследований, календари, а также экономят место. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.
Создание и форматирование таблиц
Задание строки и ячейки таблицы
<TABLE>…</TABLE> – тег создания таблицы. <TR>…</TR> – тег, задающий строку таблицы, <TD>…</TD> – тег, задающий ячейку таблицы, <CAPTION>…</CAPTION> – тег, определяющий заголовок таблицы.
При создании таблиц используется принцип вложения тегов: внутри тега <TABLE> может один раз встретиться пара тегов <CAPTION>…</CAPTION>, затем следуют теги, определяющие строки таблицы, а внутри них – теги, определяющие ячейки в строках. Конечные теги (закрывающие) можно не использовать.
Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в теле документа. Например, ячейка таблицы может содержать вложенную таблицу или рисунок. Браузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов. Текст в таблице можно форматировать также, как и обычный текст.
Пример (таблица, состоящая из двух строк и столбцов):
<!DOCTYPE html>
<html>
<head>
<title>Столицы</title>
</head>
<body>
<TABLE border>
<CAPTION>Столицы субъектов РФ</CAPTION>
<TR align="center">
<TD >Наименование субъекта</TD>
<TD>Столица</TD>
</TR>
<TR>
<TD>Республика Саха (Якутия)</TD>
<TD>г. Якутск</TD>
</TR>
<TR>
<TD>Республика Северная Осетия</TD>
<TD>г. Владикавказ</TD>
</TR>
<TR>
<TD>Республика Татарстан</TD>
<TD>г. Казань</TD>
</TR>
<TR>
<TD>Республика Бурятия</TD>
<TD>г. Улан-Удэ</TD>
</TR>
</TABLE>
</body>
</html>
Вот как это выглядит на экране:
Обратите внимание:
- В тег <TABLE > добавлен атрибут border, указывающий браузеру, что у таблицы должна быть рамка: <TABLE border>;
- В тег <TR>, задающий строку, в которой пишутся заголовки столбцов «Наименование субъекта» и «Столица», добавлен атрибут align: <TR align="center">, для того, чтобы заголовки были выравнены по центру.