Рисуя таблицу, Web-браузер увеличивает размер ячеек (и всей таблицы) так, чтобы вместить их содержимое. Предположим, например, вы создаете ячейку с дескриптором <td> без атрибутов width или height. Если вы поместите в ячейку графическое изображение размером 150x100 пикселей, Web-браузер автоматически нарисует ячейку с шириной 150 пикселей и высотой 100 пикселей так, чтобы рисунок в нее помещался. Аналогично, если вы вставите это же изображение размером 150x100 пикселей в ячейку, определенную с шириной и высотой, равными, например, 50 пикселей, Web-браузер "растянет" ячейку от заданных размеров 50x50 пикселей до таких, которые позволят вместить в нее графическое изображение.

Присущим браузеру свойством изменять размер ячеек можно воспользоваться поместив однопиксельное прозрачное GIF-изображение в ячейку и дав Web-браузеру указание растянуть картинку до нужной высоты и/или ширины. Web-браузер, в свою очередь, растянет графическое изображение и увеличит размеры ячейки до размеров растянутого изображения. Увеличение ячейки до размеров прозрачного изображения в ячейке заставит браузер вставить точные интервалы между ячейками слева и справа от ячейки с GIF-изображением и/или ячейками, находящимися сразу же над и/или под ней.

Прозрачное GIF-изображение — это "невидимое" графическое изображение, которое можно использовать с таблицей или без таковой, чтобы воздействовать на положение объектов, размещенных на Web-странице. Посетитель сайта не будет видеть прозрачное GIF-изображение на экране компьютера, поскольку Web-браузер отображает его так, как будто это лист прозрачного стекла, лежащий поверх фона ячейки (или Web-страницы). Хотя посетитель "видит сквозь" прозрачное GIF-изображение, графическое изображение занимает определенное пространство в ячейке. В результате этого Web-браузер сделает ячейку достаточно большой для того, чтобы его вместить.

Предположим, например, вы создаете Web-страницу с меню шириной 100пикселей вдоль левого края страницы, и хотите отделить меню от остального содержимого (справа от него) 20-пиксельным интервалом, подобно тому, как показано на рис. 2.17. 

ПРАКТИКУМ

Создать таблицу с тремя столбцами, в которой пустая ячейка шириной 20 пикселей (с растянутым прозрачным GIF-изображением) отделяет содержимое левой ячейки от содержимого в правой ячейке, можно, написав следующий код: 

<table border="l" width="767" height="554"

cellspacing="0" cellpadding="0">

 <tr><td valign="top" width="100">Пункты меню</td>

<td><img height="1" width="20" src="images/spacing.gif"></td>

<td valign="top" width="647">Здесь находится содержимое Web-страницы</td></tr>

</table>

В данном примере дескриптор <img>, стоящий после второго дескриптора<td> (в третьей строке) дает Web-браузеру указание поместить прозрачное GIF-изображение, хранящееся в файле spacing.gif, во вторую ячейку таблицы. Атрибут width в дескрипторе <img> дает Web-браузеру указание "растянуть" изображение размером 1x1 пиксель так, чтобы его ширина составляла 20 пикселей.

Причина, по которой вам может понадобиться использовать прозрачное GIF-изображение — вместо того, чтобы установить атрибут width в дескрипторе <td>ячейки равным требуемому числу пикселей незаполненного пространства и оставить ячейку пустой — состоит в том, что Web-браузеры по-разному обходятся с пустыми ячейками таблиц. Например, хотя Internet Explorer и показывает фоновый цвет ячейки в пустых ячейках, Netscape Navigator этого не делает, показывая вместо него цвет фона таблицы или Web-страницы. Более того, некоторые браузеры игнорируют атрибут height и/или атрибут width, заданные в дескрипторе<td> пустых ячеек, и рисуют пустые ячейки так, что их высота равна всего лишь высоте самой высокой непустой ячейки в строке, а ширина не превышает ширины самой широкой непустой ячейки в столбце. И, наконец, ни Netscape.Navigator, ни Internet Explorer не будут рисовать левую и верхнюю границы ячейки, не имеющей содержимого — даже если атрибут border таблицы имеет значе-ние 1 или более. Однако если вы поместите однопиксельное GIF-изображение,растянутое до требуемых размеров, в ячейку таблицы, все Web-браузеры будут отображать "пустую" ячейку одинаково — с размерами GIF-изображения, заданным цветом фона ячейки и границами (если таковые заданы) — поскольку, хотя ячейка и кажется незаполненной, на самом деле она не пустая.