Сегодня: 16 сентября 2024 г., понедельник Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 10. Таблицы

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

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

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

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

Давайте создадим для примера простейшую таблицу:

<table align="center" border="1" cellpadding="0">
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Третья ячейка</td>
<td>Четвертая ячейка</td>
</tr>
</table>

В браузере это будет выглядеть так:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Мы видим в коде таблицы новые для нас теги <table>, <tr> и <td>.

Как вы, наверно, уже догадались тег <table> - это открывающий и закрывающий тег таблицы. Далее:
<tr> - "table row - ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек.
<td> - сокращение от "table data - табличные данные". Этот тег начинает и заканчивает каждую ячейку ряда таблицы.

Как и в любой таблице: ряды - это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвертая ячейка

Первая ячейка и Вторая ячейка образуют ряд. Певрая ячейка и Третья ячейка образуют столбец.

В этом примере таблица имеет два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

Пример № 2:

<table align="center" border="1" cellpadding="0">
<tr>
<td width="213" valign="top"><p align="center"><strong>Овощи</strong></p></td>
<td width="213" valign="top"><p align="center"><strong>Фрукты</strong></p></td>
<td width="213" valign="top"><p align="center"><strong>Корнеплоды</strong></p></td>
</tr>
<tr>
<td width="213" valign="top"><p align="center">Огурец</p></td>
<td width="213" valign="top"><p align="center">Яблоко</p></td>
<td width="213" valign="top"><p align="center">Редис</p></td>
</tr>
<tr>
<td width="213" valign="top"><p align="center">Помидор</p></td>
<td width="213" valign="top"><p align="center">Груша</p></td>
<td width="213" valign="top"><p align="center">Морковь</p></td>
</tr>
<tr>
<td width="213" valign="top"><p align="center">Кабачок</p></td>
<td width="213" valign="top"><p align="center">Мандарин</p></td>
<td width="213" valign="top"><p align="center">Свекла</p></td>
</tr>
<tr>
<td width="213" valign="top"><p align="center">Баклажан</p></td>
<td width="213" valign="top"><p align="center">Апельсин</p></td>
<td width="213" valign="top"><p align="center">Картофель</p></td>
</tr>
</table>

Вот так это будет выглядеть в браузере:

Овощи	Фрукты	Корнеплоды
Огурец	Яблоко	Редис
Помидор	Груша	Морковь
Кабачок	Мандарин	Свекла
Баклажан	Апельсин	Картофель

У таблиц много атрибутов.

Например, атрибут "border" используется для обозначения толщины рамки вокруг таблицы либо ее отсутствия:

Пример № 3:

Создаем таблицу с толщиной рамки в 1 пиксель:

В браузере будет выглядеть:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

А вот та же таблица, но толщина рамки – 0:

<table border="0">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

В браузере:

Ячейка 1	Ячейка2
Ячейка 3	Ячейка 4

Как и с изображениями, вы можете указывать размер таблицы в пикселях или в процентах от размера экрана:

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

Атрибут "align": выравнивает содержимое всей таблицы по горизонтали, в ряду или в отдельной ячейке. Значения этого атрибута могут быть: left, center или right.

Атрибут "valign": выравнивает содержимое ячейки по вертикали. Значения могут быть: top, middle или bottom.

<td align="right" valign="top">Ячейка 1</td>

Что можно вставлять в таблицы?

Практически всё: текст, ссылки, изображения... Можно даже вставлять одну таблицу в другую, а в нее еще одну и еще.
Несколько лет назад таблицы являлись единственным способом для распределения содержимого на странице. Однако сегодня их все больше вытесняет новый перспективный и активно развивающийся способ - CSS (каскадные таблицы стилей). Слово «таблицы» в этом словосочетании имеет скорее переносный смысл. О том, что это такое – CSS, вы узнаете в двенадцатом уроке, а также, при желании, можете зайти в подраздел CSS раздела "Сайтостроение" и почитать различные материалы на эту тему.

Однако, таблицы по прежнему живут и вы можете пользоваться ими, если вам проще и удобнее использовать их нежели CSS.

В заключение урока, предлагаю применить полученные знания на практике и создать несколько таблиц различных размеров, с разными атрибутами и содержимым. Помните как это делается? Создаете html-документ, пишете код, сохраняете и смотрите, что в получилось в Интернет-браузере.

Возможно, это займёт у вас несколько часов, но будет очень полезно для практики.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 01.03.2010

Оля! Спасибо за подсказку! В примере у тэгов таблицы не были указаны атрибуты. Вероятно при создании урока я не хотел отягощать ими пример, а в результате получилось расхождение, которого сразу не заметил. Все исправил, теперь пример соответствует тому, что отображается в браузере. Еще раз спасибо!

Комментарий добавил(а): оля
Дата: 01.03.2010

Опечатка в примере2,в браузере этот код отображается по другому

Комментарий добавил(а): оля
Дата: 01.03.2010

Опечатка в примере2,в браузере этот код отображается по другому

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.