При создании сайтов таблицы используются сплошь и рядом, а не только тогда, когда вам необходимо показать "табличные данные" - например, информацию, логически упорядоченную в столбцы и ряды.
Таблицы помогают структурировать дизайн Интернет-страницы, задать ей четкость и порядок.
Чаще всего границы таблиц не указываются, поэтому мы не видим их на сайтах и часто даже не догадываемся о структуре просматриваемой страницы.
Построение таблиц в 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 пиксель:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
В браузере будет выглядеть:
Ячейка 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 |
Как и с изображениями, вы можете указывать размер таблицы в пикселях или в процентах от размера экрана:
<table border="1" width="30%">
Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.
Атрибут "align": выравнивает содержимое всей таблицы по горизонтали, в ряду или в отдельной ячейке. Значения этого атрибута могут быть: left, center или right.
Атрибут "valign": выравнивает содержимое ячейки по вертикали. Значения могут быть: top, middle или bottom.
<td align="right" valign="top">Ячейка 1</td>
Что можно вставлять в таблицы?
Практически всё: текст, ссылки, изображения... Можно даже вставлять одну таблицу в другую, а в нее еще одну и еще.
Несколько лет назад таблицы являлись единственным способом для распределения содержимого на странице. Однако сегодня их все больше вытесняет новый перспективный и активно развивающийся способ - CSS (каскадные таблицы стилей). Слово «таблицы» в этом словосочетании имеет скорее переносный смысл. Однако, таблицы по прежнему живут и вы можете пользоваться ими, если вам проще и удобнее использовать их нежели CSS.
В заключение урока, предлагаю применить полученные знания на практике и создать несколько таблиц различных размеров, с разными атрибутами и содержимым. Помните как это делается? Создаете html-документ, пишете код, сохраняете и смотрите, что в получилось в Интернет-браузере.
Возможно, это займёт у вас несколько часов, но будет очень полезно для практики.
У таблиц, как уже говорилось в предыдущем уроке, много атрибутов. Изучим еще два.
Атрибуты "colspan" и "rowspan".
Colspan - сокращение от "column span/охват столбцов". Colspan используется в теге <td> для определения того, сколько столбцов охватывает данная ячейка:
Пример 1:
<table align="center" border="1" cellpadding="0">
<tr>
<td colspan="3">Ячейка 1</td>
</tr>
<tr><
<td>Ячейка 2</td>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Будет выглядеть в браузере:
Ячейка 1 | ||
Ячейка 2 | Ячейка 3 | Ячейка 4 |
Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.
Пример № 2:
<table align="center" border="1" cellpadding="0">
<tr>
<td colspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
</tr>
</table>
Вот так будет выглядеть в браузере:
Ячейка1 | Ячейка 2 | |
Ячейка 3 | Ячейка 4 | Ячейка 5 |
Как вы уже могли догадаться, rowspan определяет, сколько рядов охватывает данная ячейка:
Пример № 3:
<table align="center" border="1" cellpadding="0">
<tr>
<td rowspan="3">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
</tr>
</table>
В браузере:
Ячейка 1 | Ячейка 2 |
Ячейка 3 | |
Ячейка 4 |
В этом примере rowspan имеет значение "3" в ячейке "Ячейка 1". Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два).
Не очень сложно? Тогда попрактикуйтесь и создайте пару таблиц с использованием атрибутов "colspan" и "rowspan".
