Logo    
Деловая газета CitCity.ru CITKIT.ru - все об Open Source Форумы Все публикации Учебный центр Курилка
CitForum    CITForum на CD    Подписка на новости портала Море(!) аналитической информации! :: CITFORUM.RU
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

29.04.2017

Google
WWW CITForum.ru
С Новым годом!
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>. Его задача заключается в том, чтобы весь текст, который будет находиться в этой ячейке, не повлиял на ее ширину.

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

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

 

Размещение рекламы — тел. +7 495 4119920, ICQ 232284597

Подписка на новости IT-портала CITForum.ru
(библиотека, CITKIT.ru, CitCity)

Новые публикации:

24 декабря

CITKIT.ru:

  • Новогодние поздравления
  • Сергей Кузнецов. Цикл Операционные системы: Ностальгия по будущему:

  • Алексей Федорчук. OpenSolaris 2008.11 Release

  • Сергей Голубев:

  • Евгений Чайкин aka StraNNik (Блогометки):

    17 декабря

  • С.Д.Кузнецов. Базы данных. Вводный курс

    10 декабря

    CITKIT.ru:

  • OpenSolaris 2008.11 Release

  • Альтернативные ОС: две грустные истории (С.Кузнецов)
  • Nokia N810 — доведение до ума
  • CitCity:

  • Платформа 2009: заоблачные перспективы Microsoft

    4 декабря

  • Лекция С.Д.Кузнецова Понятие модели данных. Обзор разновидностей моделей данных

    CITKIT.ru:

  • OpenSolaris 2008.11 Release. Первые впечатления

  • Linux vs FreeBSD: продолжим "Священные войны"?

  • Nokia N810 as is

  • Индульгенция для FOSS

  • Друзья СПО'2008

    26 ноября

  • Нечеткое сравнение коллекций: семантический и алгоритмический аспекты

    CitCity:

    CITKIT.ru:

  • Глава из книги А.Федорчука
    Сага о FreeBSD:
  • 19 ноября

  • Проблемы экономики производства крупных программных продуктов

  • Язык модификации данных формата XML функциональными методами

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    Заметки к книге:

  • FreeBSD: монтирование сменных устройств и механизм HAL
  • Текстовый редактор ee

    12 ноября

  • Правило пяти минут двадцать лет спустя, и как флэш-память изменяет правила (Гоц Грейф, перевод: Сергей Кузнецов)

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:
  • OSS в России: взгляд правоведа (В.Житомирский)

  • Новая статья из цикла С.Голубева "Железный марш":

    29 октября

  • О некоторых задачах обратной инженерии

  • Веб-сервисы и Ruby

  • Тестирование web-приложений с помощью Ruby

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

  • PuppyRus Linux - беседа с разработчиком (С.Голубев)

  • Сергей Кузнецов. Заметка не про Linux

    22 октября

  • Обзор методов описания встраиваемой аппаратуры и построения инструментария кросс-разработки

    CITKIT.ru:

  • Сергей Кузнецов. Почему я равнодушен к Linux

  • Глава из книги А.Федорчука
    Сага о FreeBSD:
  • Что надо иметь
    3. Базовые познания

    CitCity:

  • Управление IT-инфраструктурой на основе продуктов Microsoft

    15 октября

  • Методы бикластеризации для анализа интернет-данных

    CitCity:

  • Разъемы на ноутбуках: что они дают и зачем их так много?
  • AMD Puma и Intel Centrino 2: кто лучше?

    CITKIT.ru:

  • Новый цикл статей С.Голубева
    Железный марш:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    8 октября

  • Автоматизация тестирования web-приложений, основанных на скриптовых языках
  • Опыт применения технологии Azov для тестирования библиотеки Qt3

    Обзоры журнала Computer:

  • SOA с гарантией качества
  • Пикоджоуль ватт бережет
  • ICT и всемирное развитие

    CitCity:

  • Пиррова победа корпорации Microsoft

    CITKIT.ru:

  • Главы из книги А.Федорчука
    Сага о FreeBSD:

    Статья из архива:

  • Я живу в FreeBSD (Вадим Колонцов)

    Новые Блогометки:

  • Перекройка шаблона Blogger или N шагов к настоящему
  • Blogger. Comment style
  • Screenie или глянцевый снимок экрана

    2 октября

    CITKIT.ru:

  • Сага о FreeBSD (А. Федорчук)

    Zenwalk: пакет недели

  • Банинг — интеллектуальное развлечение (С.Голубев)

    CitCity:

    25 сентября

  • Клермонтский отчет об исследованиях в области баз данных

    CITKIT.ru:

  • Пользователям просьба не беспокоиться... (В.Попов)

  • Снова про ZFS: диск хорошо, а два лучше
  • Командная оболочка tcsh (А.Федорчук)

    Zenwalk: пакет недели

    17 сентября

  • T2C: технология автоматизированной разработки тестов базовой функциональности программных интерфейсов
  • Технология Azov автоматизации массового создания тестов работоспособности

    CITKIT.ru:

  • FreeBSD: ZFS vs UFS, и обе-две — против всех (А.Федорчук)

    Zenwalk: пакет недели

  • Дачнет — практика без теории (С.Голубев)

    10 сентября

  • За чем следить и чем управлять при работе приложений с Oracle
  • Планировщик заданий в Oracle
    (В.Пржиялковский)

    CITKIT.ru:

  • Microsoft: ответный "боян" (С.Голубев)

  • Причуды симбиоза, или снова "сделай сам" (В.Попов)

  • Файловые системы современного Linux'а: последнее тестирование
  • Zsh. Введение и обзор возможностей
    (А.Федорчук)

    Описания пакетов Zenwalk: Zsh, Thunar, Thunar-bulk-rename, Xfce4-places-plugin, Xfce4-fsguard-plugin

    Блогометки:

  • Google Chrome
  • Лончер для ASUS Eee PC 701

    3 сентября

    CITKIT.ru:

  • Заметки о ядре (А.Федорчук):

    Добавлены описания пакетов Zenwalk: Galculator, Screenshot, Gnumeric, Pidgin

    В дискуссинном клубе:

  • И еще о Википедии и Google Knol

  • Лекция для начинающего линуксоида (С.Голубев)

    26 августа

  • Транзакционная память (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • Открыт новый проект Zenwalk: пакет недели

  • Статья Текстовые процессоры и их быстродействие: конец еще одной легенды?

    21 августа

    CITKIT.ru:

  • Почему школам следует использовать только свободные программы (Ричард Столлман)
  • Беседа Сергея Голубева с учителем В.В.Михайловым

  • Википедия или Гуглезнание? Приглашение к обсуждению (Алексей Федорчук)
  • Народная энциклопедия от Google (StraNNik)

  • Обзор Mandriva 2009.0 Beta 1 Thornicrofti
  • Новичок в Линукс: Оптимизируем Mandriva 2008.1

  • Книга Zenwalk. Приобщение к Linux:

    13 августа

    CitCity:

  • Мирный Atom на службе человеку. Обзор платы Intel D945GCLF с интегрированным процессором
  • Обзор процессоров Intel Atom 230 на ядре Diamondville

  • iPhone - год спустя. Скоро и в России?

    CITKIT.ru:

  • Интермедия 3.4. GRUB: установка и настройка (из книги Zenwalk. Приобщение к Linux)

    6 августа

  • СУБД с хранением данных по столбцами и по строкам: насколько они отличаются в действительности? (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • Интермедия 2.2. Что неплохо знать для начала (из книги Zenwalk. Приобщение к Linux)

  • И снова про шрифты в Иксах (А.Федорчук)

  • 20 самых быстрых и простых оконных менеджеров для Linux

  • Дело о трех миллиардах (С.Голубев)

    30 июля

  • OLTP в Зазеркалье (Пересказ: С. Кузнецов)

    CitCity:

  • Будущее BI в облаках?
  • Тиражные приложения и заказная разработка. Преимущества для заказчика
  • Дискуссия со сторонниками заказной разработки

    CITKIT.ru:

  • Новые главы книги Zenwalk. Приобщение к Linux:
  • Глава 8. Пакеты: средства установки, системы управления, системы построения
  • Глава 9. Zenwalk: репозитории, пакеты, методы установки

    23 июля

    CITKIT.ru:

  • Все против всех. 64 vs 32, Intel vs AMD, tmpfs vs ext3
  • Две головы от Intel

  • Zenwalk: обзор штатных приложений (глава из книги "Zenwalk. Приобщение к Linux")

  • Нормально, Григорий...

    16 июля

    Обзоры журнала Computer:

  • Перспективы и проблемы программной инженерии в XXI веке
  • Большие хлопоты с большими объемами данных
  • Перспективы наноэлектроники

    CITKIT.ru:

  • Интермедия о лицензиях (А.Федорчук. "Zenwalk. Приобщение к Linux")

  • Есть ли будущее у KDE?

  • Linux в школе: альтернативный вариант в задачах

  • Шифр (приключения агента Никодима)

    10 июля

    CITKIT.ru:

  • Новые разделы книги А. Федорчука Zenwalk. Приобщение к Linux:
  • Интермедия вступительная. Linux или GNU/Linux? Как вас теперь называть?
  • Глава 5. Среда Xfce
  • Глава 6. Xfce: приложения и плагины

  • ZUR (Zenwalk User Repository) FAQ

    2 июля

  • Персистентность данных в объектно-ориентированных приложениях (С. Кузнецов)

    CITKIT.ru:

  • Новые разделы книги А. Федорчука Zenwalk. Приобщение к Linux:
  • Интермедия 1.2. Дорога к Zenwalk'у. Период бури и натиска
  • Интермедия 3.3. Немного о Linux'е и "железе"
  • Глава 4. Настройка: инструментами и руками
  • Интермедия 4.1. Zenpanel и конфиги: поиски корреляции

  • Интервью с Жан-Филиппом Гийоменом, создателем дистрибутива Zenwalk

  • Linux в школе: первые итоги (С. Голубев)

    25 июня

    CITKIT.ru:

  • Zenwalk. Приобщение к Linux (А. Федорчук)

  • Логика и риторика (С.Голубев)

  • Технология Tru64 AdvFS

  • Ханс Райзер предлагает отвести полицейских к телу Нины

    18 июня

  • Проекты по управлению данными в Google (Пересказ: С. Кузнецов)

    CITKIT.ru:

  • ОС и поддержка "железа": мифы и реальность (А. Федорчук)

  • Linux в школе: другие дистрибутивы

  • Пинок (С. Голубев)

    4 июня

  • Ландшафт области управления данными: аналитический обзор (С. Кузнецов)

    CITKIT.ru:

  • Linux в школе: слово заинтересованным лицам

  • SlackBuild: пакеты своими руками

  • Linux от компании Novell. Установка и обзор openSUSE Linux

    Все публикации >>>




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

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