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

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


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


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

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

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

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

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

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

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

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

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




    <table width=610 cellpadding=0 cellspacing=0 border=0> <tr> <td width=100><!-- Insert something 100 pixels or smaller--></td> <td width=400><!--Insert text here--></td> <td width=110><!--Insert something 110 pixels or smaller--></td> </tr> </table>

    С другой стороны, если таблица в большинстве случаев использует ширину столбца тэга <TD>, но иногда столбцы текста могут быть поуже, не устанавливайте атрибут width в тэге <TABLE>.

    Наконец, если вы хотите, чтобы таблица всегда занимала все допустимое пространство, установите ее атрибут width в процентах – например, 100%.

  4. Если столбцы становятся слишком широкими, когда вы увеличиваете окно (например, вокруг картинок появляется пустое пространство), уменьшите значение атрибута width в тэге <TABLE>.


  5. Если одни столбцы становятся слишком узкими при уменьшении окна, а другие растягиваются и занимают их место, нарушая макет страницы, вы можете запретить сжатие ячеек. Если строка содержит одну строку текста или несколько изображений, то вы можете заключить их в тэги <NOBR> и </NOBR>, чтобы не разрешить броузеру переносить содержимое на новую строку. Например, этот HTML не дает изображению оторваться от текста: ячейка всегда будет вмещать два слова.

    <td> <nobr>Sweet Lorraine <img src="arrow.gif"height=16 width=30></nobr> </td>

    Чтобы столбец не уменьшался, включите изображение, ширина которого равна минимальной ширине столбца. Вы можете использовать вкладку – однопиксельное прозрачное изображение GIF. Чтобы создать вкладку, откройте графический редактор (Photoshop или Fireworks), создайте изображение размером 1 на 1 пиксел и экспортируйте его как прозрачный GIF (с минимумом цветов). Чтобы установить минимальную ширину ячейки, вставьте вкладку, используя тэг <IMG>, и установите атрибут height равным 1, а атрибут width равным нужной ширине ячейки.

    <td width=5 height=200 bgcolor=#339966> This is my message and I don’t want it to shrink. <img src="shim.gif"width=350 height=1></td>

    Ячейка не может стать меньше, чем это изображение, так что столбец не окажется меньше определенной ширины.




Содержание раздела