Фэйсом об тэйбл

Каждый из броузеров имеет свой довольно сложный алгоритм выбора размеров ячеек и раз­мещения материала в них в зависимости от натуральных размеров материала в ячейках, «рекомендованных» размеров ячеек (атрибуты height и width тега TD) и наличия неко­торых особых случаев вроде групп ячеек, объединенных по горизонтали или вертикали (атрибуты colspan и rowspan того же тега). Расследование нюансов, странностей и просто

ошибок в этих алгоритмах — занятие необычайно увлека­тельное (я сам, надо признаться, отдал ему должное в свое время), но малопродуктивное. Лучше примите к сведению небольшой набор советов, следование которым защитит вас от большинства неприятных неожиданностей:

• Не полагайтесь на «рекомендательные» размеры для от­дельных ячеек; если вам нужно, чтобы ячейка имела определенную ширину и высоту, вставьте в нее соот­ветствующих размеров распорку. Без атрибута width в теге TD нельзя обойтись только тогда, когда нужно ограничить ширину ячейки, содержащей текст (причем I результат будет соответствовать ожиданиям, только если текста этого хватает при данной ширине хотя бы на одну полную строку).

Имеет смысл зафиксировать также общую ширину са­мой внешней таблицы, определяющей габариты всей страницы: атрибуту width соответствующего тега TABLE обычно присваивается значение 100% для «резинового» и около 580 пикселов для жесткого табличного дизайна (стр. 193). Более того, без жесткого (в пикселах) зада­ния ширины в теге TABLE таблица, содержащая слитые по горизонтали ячейки, иногда совершенно необъясни­мым образом «распухает», так что ее ширина превосходит сумму ширин распорок во всех ячейках.

• При необходимости можно сращивать несколько ячеек по горизонтали (атрибут colspan тега TD), но только в том случае, если ширины участвующих в операции столбцов жестко заданы распорками в других ячейках; если же, наоборот, жестко задана только ширина объ­единенной ячейки, на правильное распределение этой ширины между столбцами рассчитывать не приходится. По этой же причине объединять ячейки по вертикали не рекомендуется вообще — лучше пользоваться вложенны­ми таблицами (рис. 52).

• В сложных случаях, когда таблица упорно не хочет вести себя как задумано, можно подсветить границы ячеек, заменив в заголовке border=0 на border=l, — удоб­ное средство отладки, аналогичное временной замене невидимых распорок на видимые (см. выше). Учтите, что появляющаяся рамка добавляет по одному пикселу ширины и высоты на каждую ячейку, так что общие габариты таблицы изменяются.

Рис. 52

Условия задачи: ячейка А должна иметь пе­ременную высоту, так как со­держит текст; ячейка В со­держит графическую вставку и должна точно соответство­вать ей по размерам; высота ячейки С, следовательно, долж­на быть равна разности высот ячеек А и В. Попытка решить задачу с помощью rowspan=2 в ячейке А к успеху не при­водит; как ни старайся, ячей­ка В выходит выше, чем надо, а С упорно не дотягивает до нужной высоты Жесткая рас­порка в С делу не поможет, так как искомая высота С за­висит от А и, следовательно, есть величина непостоянная; не помогает и установка фикси­рованной величины height для ячейки В. Можно попробовать вообще отказаться от разделе­ния ячеек В и С, слив их в одну и отогнав изображение наверх с помощью valign=top; если, однако, вам нужна разлиновка или же другой фоновый цвет в В, не обойтись без вложенной одноячеечной таблицы вокруг изображения. (Те же проблемы встают, хотя и реже, и при го­ризонтальном расположении — ячейки чаще имеют переменную высоту, чем ширину.)

Дата добавления: 2015-05-26