| Home | О нас | Самоучитель иврита | Путеводитель по Израилю | Фотопутешествия | Города Израиля | Телефонный справочник | Еврейские имена | Еврейские праздники | Ивритская поэзия |
|
|
Итак, давайте теперь приводить в порядок нашу таблицу.
Прежде всего, мы можем указать длину таблицы. Например, <table width=600> - указывает, что длина всей нашей таблицы будет 600 пикселей. Мы можем указать длину самой таблицы, а также длину ее столбца в определенной строке (которая, понятно, должна быть или меньше, или равна длине таблицы).
Существует и параметр, означающий высоту - height, который может относиться ко всей таблице или к ее строке.
Если, например, один из столбцов таблицы полностью занимает картинка, то имеет смысл подогнать размеры соответствующего столбца под размеры картинки. Наша картинка имеет размеры 300 на 200 пикселей. Вот и давайте укажем именно их для соответствующего столбца.
Остальные размеры писать не обязательно - таблица сама все подгонит оптимальным образом. Хотя, если вы очень аккуратный вебдизайнер и думаете обо всех своих пользователях, у которых могут быть разные размеры и разрешения экрана, а также разные браузеры, то вы поставите точные размеры везде. Или, что еще лучше, укажете длину столбцов в процентах, и тогда каждый из них займет пропорционально столько места, сколько вы ему предназначили.
Необходимо также указать для нашей таблицы параметр border. Сделаем его нулевым, для того, чтобы границы между строками и столбцами таблицы не были видны.
Два параметра cellpadding и cellspacing предназначены для того, чтобы регулировать расстояния между рядами и столбцами. Воспользуемся одним из них и сделаем эти расстояния равными пяти.
И еще два важных параметра - allign и vallign. Первый актуален для всей таблицы и для ее столбцов (td), второй - для строк (tr). Они определяют расположение содержимого строки и столбца относительно границ. Параметр align может иметь значения left, center или right. Параметр valign - top, middle или bottom.
Давайте расположим текст "Лена Петрова" в соответствующем столбце слева и вверху, а "Я рада, что вы ко мне зашли!" - посередине.
А текст "Добро пожаловать" вообще вынесем за пределы таблицы и поставим внизу под ней. Посередине страницы, конечно.
С учетом всего сказанного выше наш исправленный код будет выглядеть так:
<html>
<head>
</head>
<body bgcolor=yellow>
<br><br>
<center>
<table width=600>
<tr>
<td>
<center>
<table width=600 border=0 cellpadding=5>
<tr valign=top>
<td width=300 height=200>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
</td>
<td align=left>
<b>Лена Петрова</b>
</td>
</tr>
<tr>
<td align=center>
Я рада, что вы ко мне зашли!!
</td>
</tr>
</table>
<p>
<i>Добро пожаловать!</i>
</center>
</td>
</tr>
</table>
</body>
</html>
И вот результат:
Мы видим, что текст во второй строке таблицы («Я рада, что вы ко мне зашли!!») сбился влево, это особенно заметно рядом с надписью «Добро пожаловать», вынесенной из таблицы и размещенной ровно посередине экрана. Почему же так произошло? Ведь мы же указали для соответствующего тега <td> align=center!
Дело в том, что наша таблица оказалась как бы "в растерянности" из-за того, что у нее в первой строке два столбца, а во второй - только один. Так давайте ей сообщим, что именно так мы и задумывали, поэтому она должна растянуть все содержимое второй строки на ее полную длину. Сделаем мы это так: в соответствующем (втором) теге <td> напишем <td colspan=2>. Это означает, что вторая строка, хоть она и состоит из одного столбца, должна соответствовать по длине первой строке, состоящей из двух столбцов.
Исправленный код:
<html>
<head>
</head>
<body bgcolor=yellow>
<br><br>
<center>
<table width=600>
<tr>
<td>
<center>
<table width=600 border=0 cellpadding=5>
<tr valign=top>
<td width=300 height=200>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
</td>
<td align=left>
<b>Лена Петрова</b>
</td>
</tr>
<tr>
<td colspan=2 align=center>
Я рада, что вы ко мне зашли!!
</td>
</tr>
</table>
<p>
<i>Добро пожаловать!</i>
</center>
</td>
</tr>
</table>
</body>
</html>
И вот что получается:
Вот теперь все в порядке!
