Logo Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Скидка до 20% на услуги дата-центра. Аренда серверной стойки. Colocation от 1U!

Миграция в облако #SotelCloud. Виртуальный сервер в облаке. Выбрать конфигурацию на сайте!

Виртуальная АТС для вашего бизнеса. Приветственные бонусы для новых клиентов!

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

VPS/VDS серверы. 30 локаций на выбор

Серверы VPS/VDS с большим диском

Хорошие условия для реселлеров

4VPS.SU - VPS в 17-ти странах

2Gbit/s безлимит

Современное железо!

2000 г

Слуга двух господ (Часть III)

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

Таблицы, таблицы, таблицы... Ну куда нам без них? В настоящее время ни одна более-менее сложная верстка не обходится без применения таблиц. И опять же нам нужно примирить страничку как с IE, так и с NN.

Начнем с того, что применяются таблицы для верстки не по своему прямому назначению, а лишь как каркас, который позволяет нам относительно свободно манипулировать блоками информации на нашей страничке. Благодаря именно таблицам мы можем создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, точное позиционирование графики, цветные подложки под текст, тонкие линии на всю ширину или высоту странички и т.д.

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

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

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

<table border="0" cellspacing="0" cellpadding="0">

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

Ширина таблицы и ячеек

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

Internet Explorer послушно соблюдает указанную ширину ячейки. Netscape Navigator же принимает указанные значения не более как желаемые рекомендации. Истинную ширину каждой ячейки он рассчитывает после анализа количества текста в соседних ячейках, и в тех, где текста больше, он расширяет ячейку, а где меньше - сужает. Ширина же пустых ячеек стремится к нулю (разумеется, в случае, если весь столбец состоит из пустых ячеек). И, практически, никогда получаемая ширина ячейки не равна значению, указанному в атрибуте width тега <td>.

Из этих рассуждений следует вывод, что использовать атрибут width в качестве надежного средства указания ширины ячейки практически бесполезно. Абсолютно надежным способом для случаев верстки в таблицах с фиксированной шириной является вставка невидимых распорок, получаемых при помощи прозрачного однопиксельного GIF-а. Для "резиновых" таблиц такого надежного способа, к сожалению, нет.

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

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки в первой строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки в первой строке -->
</td>
</tr>
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки во второй строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки во второй строке -->
</td>
</tr>
</table>

Как видите, в данном случае атрибут width в тэге <td> не использовался совсем. Вся работа по фиксации ширины ячейки была выполнена при помощи однопиксельного GIF-а. Обратите внимание, что ширина вставки должна быть одинаковой во всех ячейках одного столбца. А сумма ширин всех вставок в одной строке должна равняться общей ширине таблицы. Кроме того, если Вы заметили, то после вставки однопиксельного GIF-а, идет тег <br>. Его задача заключается в том, чтобы весь текст, который будет находиться в этой ячейке, не повлиял на ее ширину.

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

Назад | Содержание | Вперед

 

Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

✅ Дешевый VPS-хостинг на AMD EPYC: 1vCore, 3GB DDR4, 15GB NVMe всего за €3,50!

🔥 Anti-DDoS защита 12 Тбит/с!

VPS в России, Европе и США

Бесплатная поддержка и администрирование

Оплата российскими и международными картами

🔥 VPS до 5.7 ГГц под любые задачи с AntiDDoS в 7 локациях

💸 Гифткод CITFORUM (250р на баланс) и попробуйте уже сейчас!

🛒 Скидка 15% на первый платеж (в течение 24ч)

Новости мира IT:

Архив новостей

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...