Слуга двух господ (Часть III)
Слуга двух господ (Часть III)
Таблицы, таблицы, таблицы... Ну куда нам без них? В настоящее время ни одна более-менее сложная верстка не обходится без применения таблиц. И опять же нам нужно примирить страничку как с IE, так и с NN.
Начнем с того, что применяются таблицы для верстки не по своему прямому назначению, а лишь как каркас, который позволяет нам относительно свободно манипулировать блоками информации на нашей страничке. Благодаря именно таблицам мы можем создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, точное позиционирование графики, цветные подложки под текст, тонкие линии на всю ширину или высоту странички и т.д.
При использовании таблиц в качестве каркаса нужно скрупулезно соблюдать несколько правил, позволяющих избежать уже известных проблем:
- Даже если таблица будет в одну ячейку, то обязательно прописывайте ее полную форму:
<table>
<tr>
<td><!-- содержимое таблицы --></td>
</tr>
</table>
- Помещать содержимое таблиц можно только внутри тегов <td></td>. Между <table> и <tr>, а также между <tr> и <td> не должно быть ничего, за исключением пробелов и символа перевода строки.
- Всегда закрывайте табличные тэги. Netscape Navigator не понимает незакрытых таблиц и немедленно вызывает проблемы. Как правило, это проявляется в том, что в IE страничка показывается нормально, а в NN мы видим абсолютно чистую страницу.
- Никогда не оставляйте пустую ячейку. Если нужно, чтобы в ячейке ничего не было, то нужно вместо текста подставить неразрывный пробел . Иначе ячейка в Netscape Navigator будет показана некорректно.
- Выравнивание таблицы по ширине страницы лучше всего производить при помощи внешних, по отношению к таблице, тегов <center></center> и <div></div>, а не при помощи атрибута align в тэге <table>. Также для совместимости с Netscape Navigator.
- Все характеристики, относящиеся к формату ячеек (такие как цвет фона или выравнивание текста) задавать только в тэге <td>. Если какие-то атрибуты относятся ко всей строке таблицы, то их можно задать и в тэге <tr>.
- Воздержаться от использования атрибутов colspan и rowspan, кроме случаев, когда нужно объединить все ячейки в одной строке. Вместо этого лучше пользоваться вложенными таблицами.
Для того, чтобы таблицу можно было использовать в качестве каркаса для странички, в ней нужно прописать нулевые значения атрибутов, задающих толщину рамки и расстояния между ячейками и текстом:
<table cellspacing="0" cellpadding="0">
Такая таблица будет не видна в броузере, но будет успешно выполнять свои функции. Во время же отладки страницы имеет смысл прописать толщину рамки, равной единице. Это позволит быстро найти ошибку, допущенную при верстке.
Содержание раздела