Практика разработки Web-страниц


Отображаемая ширина столбца отличается от заданной


Когда вы устанавливаете ширину или высоту ячеек в таблице – задав размер в пикселах или указав процентное отношение, то предполагаете, что они отобразятся так, как вы задали. Однако если пользователь изменяет размер окна броузера или устанавливает шрифт по умолчанию, ширина столбцов может изменяться. Если ваша графика и текст должны занимать определенное место, вам вряд ли понравится результат.

Когда картинки и расположение текста зависят от ширины столбцов, внимательно отнеситесь к установке ширины и проверьте, как отображается таблица в разных броузерах

Когда картинки и расположение текста зависят от ширины столбцов, внимательно отнеситесь к установке ширины и проверьте, как отображается таблица в разных броузерах

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

Чтобы управлять шириной столбцов, сделайте следующее.

  1. Проверьте вашу таблицу в большинстве версий броузеров, чтобы понять, что с ней происходит. Разверните окно на весь экран, затем уменьшите его до минимально возможного, посмотрите, как изменяются столбцы и что нужно изменить.
  2. Убедитесь, что в каждом тэге <TD> в атрибуте width установлено количество пикселов – иначе броузеры будут добавлять место в столбцах.

    <td width=100 align=center></td>

    Если вы хотите, чтобы один из столбцов занимал максимально возможное место, установите для него атрибут width равным 100% (но убедитесь, что другие столбцы при этом не "схлопываются").

    Когда трудно понять, в чем проблема, включите отображение границ таблицы. См. раздел "Отображение границ таблицы и ячейки для тестирования".

  3. Чтобы зафиксировать ширину всей таблицы (т.е. чтобы столбцы не изменяли размер, пока в них удается размещать содержимое), установите атрибут width для тэга <TABLE> в пиксельном значении. Убедитесь, что оставлили достаточно места для содержимого – но не больше суммы столбцов (плюс поля и отступы, если они есть). Например, эта таблица расширяется только до 610 пикселей, таким образом ее столбцы не изменяют размер при нормальных обстоятельствах:




    Начало  Назад  Вперед