snake

Давайте попробуем разрезать наш эскиз на три вертикальные полоски – по правой границе первой серой полосы и по правой границе белого поля. Наша змея окажется разрезанной на три составляющие - голову, туловище и хвост.

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

Oпределить для каждой ячейки свой цвет фона;
Указав высоту таблицы равной 100%, добиться продолжения серых полей до нижней границы окна, независимо от наполнения страницы.

Вот как будет выглядеть наша запись в HTML-коде:


<HTML>

<HEAD>

  <TITLE>snake</TITLE>

</HEAD>


<BODY BGCOLOR=”white”>

  <TABLE WIDTH="100%" HEIGHT="100%">

	   <TR>

	    <TD HEIGHT="100%"  BGCOLOR=”#DADADA”>...голова...</TD>

	    <TD HEIGHT="100%"  WIDTH="100%" BGCOLOR=”white”>...тело...</TD>

	    <TD HEIGHT="100%"  BGCOLOR=”#DADADA”>...и хвост...</TD>

	   </TR>

 </TABLE>

</BODY>

</HTML>

Если вы прописываете <TABLE HEIGHT=100%>, ваша таблица растянется на всю высоту экрана, и любой узор, используемый как фон таблицы, заполнит все пространство по высоте от верхней до нижней границы окна.

Таким образом, таблица на один рядок с высотой в 100% без проблем зальет любой столбец любым указанным вами цветом или тайлом, и корректно отобразиться в обеих броузерах.

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

Положение невозможно поправить с помощью указания точной высоты ячейки – все равно броузер вычислит пропорцию по высоте содержимого ячейки, а не по вашим указкам. Кстати, то же замечание относится и к использованию ROWSPAN в ячейках таблицах.
Единственный выход – прописать какой-нибудь (например, нижней) ячейке HEIGHT=100%, а всем остальным – высоту в пикселях. Однако в этом случае Netscape спрячет низ вашей страницы за границу экрана и справа появится полоса прокрутки. Это не так уж и плохо, но некоторых раздражает. Особенно, когда вся информация на странице помещается в пяти верхних строчках, и прокручивать, в общем-то, нечего.

Высоту ячейки 100% Netscape интерпретирует, как высоту окна, и если в таблице кроме строки с этой ячейкой есть и другие строки, то сумма высот всех строк будет однозначно больше, чем высота окна.

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

Вложенным таблицам бесполезно прописывать высоту в 100%, поскольку это все равно не сработает. Высота вложенных таблиц вычисляется только по их содержимому – не больше, не меньше.

Далее: ...продолжаем сеанс вивисекции...