Урок 4. Практика

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

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

Таблица задается тэгом: <table></table>

Т.к. таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их:

<tr></tr> - строчка таблицы

<td></td> - столбец (ячейка) таблицы

Давайте создадим такую таблицу состоящую из двух строк и трех столбцов.

Для этого необходимо создать сначала строки:

<table>

<tr></tr>

<tr></tr>

</table>

Итак, строки заданы. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

Сейчас заполните получившуюся таблицу:

<table>

<tr>

<td>1 ячейка</td>

<td>2 ячейка</td>

<td>3 ячейка</td>

</tr>

<tr>

<td>4 ячейка</td>

<td>5 ячейка</td>

<td>6 ячейка</td>

</tr>

</table>

Фон ячеек задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.

<table>

<tr>

<td bgcolor=orange>1 ячейка</td>

<td bgcolor=blue>2 ячейка</td>

<td bgcolor=orange>3 ячейка</td>

</tr>

<tr>

<td bgcolor=blue>4 ячейка</td>

<td bgcolor=orange>5 ячейка</td>

<td bgcolor=blue>6 ячейка</td>

</tr>

</table>

Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга <tr>:

<tr bgcolor=yellow>

Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:

<table bgcolor=gray>

Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.

Итак если вы сделали все правильно у вас должна получится следующая таблица:

Но это не совсем то, что нам нужно. Дело в том, что мы не задали высоту и ширину ячейкам таблицы. Чтобы задать высоты и ширину используют атрибуты height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).

<table>

<tr>

<td height=”35” width=”50” bgcolor=orange>1 ячейка</td>

<td width=”50” bgcolor=blue>2 ячейка</td>

<td width=”50” bgcolor=orange>3 ячейка</td>

</tr>

<tr>

<td height=”35” width=”50” bgcolor=blue>4 ячейка</td>

<td width=”50” bgcolor=orange>5 ячейка</td>

<td width=”50” bgcolor=blue>6 ячейка</td>

</tr>

</table>

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

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

Кстати, атрибуты height и width можно задать в процентах:

<td width="30%"> содержимое ячейки </td>

Если мы задали для ячейки ширину в 30 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 70 процентов, т.е. сумма их ширин не должна превышать 70 процентов.

Вернемся к нашему примеру: теперь мы почти получили то, что хотели.

Теперь нам осталось лишь выровнять содержимое (текст) внутри таблицы:

<table>

<tr align=center>

<td height=”35” width=”50” bgcolor=orange>1 ячейка</td>

<td width=”50” bgcolor=blue>2 ячейка</td>

<td width=”50” bgcolor=orange>3 ячейка</td>

</tr>

<tr align=center>

<td height=”35” width=”50” bgcolor=blue>4 ячейка</td>

<td width=”50” bgcolor=orange>5 ячейка</td>

<td width=”50” bgcolor=blue>6 ячейка</td>

</tr>

</table>

Мы использовали атрибут align (который может принимать три значения: left, right, center) в тэге <tr>. Т.е. мы задали выравнивание в ряде. Чтобы задать выравнивание в ячейке, то атрибут align надо записать в тэг <td>. И получилось следующее:

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

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

Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу):

Как же будет выглядеть код HTML в этом случае?

<table>

<tr align=center>

<td valign=top height=”35” width=”50” bgcolor=orange>1 ячейка</td>

<td width=”50” bgcolor=blue>2 ячейка</td>

<td valign=bottom width=”50” bgcolor=orange>3 ячейка</td>

</tr>

<tr align=center>

<td valign=bottom height=”35” width=”50” bgcolor=blue>4 ячейка</td>

<td width=”50” bgcolor=orange>5 ячейка</td>

<td valign=top width=”50” bgcolor=blue>6 ячейка</td>

</tr>

</table>

∫

Домашнее задание: вставьте в ваш собственный сайт таблицы и сделайте выравнивание текста в них.