Cols 1px (однопиксельные таблицы)
Intro.
Во времена, когда новые сайты выпучивает на поверхность словно несъедобные грибы после обильного кислотного дождя, индустрия WEB конструкторства уже давненько перешагнула разумные рамки, то что ранее случилось с программированием теперь в полной своей кривой мере входит в WEB дизайн, вернее в WEB кодинг. С появлением такой болезни как визуальные редакторы HTML кода появилась нездоровая тенденция создания WEB страниц, как рисовать сайт в векторке, потом покромсать полученную картинку и стыковать её в одном из таковых. Если вы приверженцы онной, то видимо этот текст не для Вас, ибо этот текст для тех кто хоть изредка заходит в код своего интернет проекта с помощью notepad.exe или HtmlLerz, и задумывается о его оптимизации, создаёт текстовые дизайны, и пытается обойти ограничения наложенные создателями разметки HTML - этот текст для HTML кодера.
Ячейка в 1px.
Рано или поздно, когда практикуешь разметку страницы с помощью таблиц, приходит мысль создать ячейку высотой или шириной в один пиксель... Казалось бы это невозможно, ведь если в ячейке не прописать текст, или хотя бы один неразрывный пробел ( ) то она не отображается такими браузерами как NN или Opera. Однако первое что приходит на ум в обман этому - поместить в ячейку прозрачную GIF картинку 1x1 px, идея эта стара как мир, но приятного в ней для реального пользователя сети маловато, т.к. для загрузки этой пусть и ничтожной по размеру картинки браузеру придётся запросить сервер на предмет её скачивания, а если таковой перегружен другими запросами, то может уйти не одна секунда пока запрос будет удовлетворён. Как следствие страница содержащая множество таких элементов будет всё загружаться и загружаться так и не показав своего содержимого, ведь тот же Netscape Navigator не отобразит таблицу покуда не получит всех её ячеек.
Следует логичный вывод - эту несправедливость надо как то бороть!
Работая перебором.
В один из дней, мне, вашему покорному слуге, на досуге пришла в голову абсолютно бредовая на первый взгляд идея - поэкспериментировать над различными комбинациями тегов TABLE в коде HTML, и было это в далёком 1998 году.
Создав таблицу на десяток ячеек и один столбец, задав одной из ячеек ширину в 1 пиксель (WIDTH=1) я принялся запихивать в её ячейки всё что только могло прийти в буйный разум, начиная от <SCRIPT></SCRIPT> и заканчивая <TABLE></TABLE> задавшись целью получить стабильно отображаемую во всех браузерах ячейку шириной ровно одну точку. В какой-то момент ячейка приняла именно такую ширину, мало того когда была задана высота также 1px, то и оно поддержалось и поддерживается по сей день...
Оказалось, что во всех без исключения браузерах, которые понимают таблицы, есть один незначительный баг (хотя возможно это и не баг, но уж "undocumented function" - это точно): возможность создать ячейку любой ширины и высоты, если внутрь ячейки поместить таблицу с одним столбцом и одной ячейкой нужной ширины, в HTML коде это выглядит так:
|
<TABLE WIDTH="100%" COLS=2 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR> <TD WIDTH=1 BGCOLOR="FF0000"><TABLE WIDTH=1 BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD></TD></TR></TABLE></TD> <TD WIDTH="100%"> </TD> </TR> </TABLE> |
В результате вывода такой таблицы мы будем иметь на экране таблицу с одной однопиксельной в ширину ячейкой и одной ячейкой на весь оставшийся экран...
В чём сила браузер?
Сила такой таблицы состоит в том, что при увеличении своего "веса" на одну такую ячейку всего в 25 байт мы не заставим браузер клиента лишний раз обращаться к серверу за картинкой, плюс появляется возможность создавать ячейки произвольной ширины и высоты, тоесть теперь нарисовать свою фотографию в таблице скажем 100x100 пикселей без единого IMG SRC проще пареной брюквы (если конечно не считать, что придётся поднапрячься с прописью цвета). Мало того это способ можно считать избавлением от эффекта отключения графики в браузере Opera - как известно в таком режиме это инет бродило показывает квадратище в которое пишет параметр ALT="" или имя файла даже если в IMG SRC жёстко задано HEIGHT=1 WIDTH=1.
Дальнейшие изыскания.
Внезапно понятый способ оказался удобен и для формирования разделительных черт эквивалентных тегу HR, но без переноса сверху и снизу, в качестве этого успешно работает код:
|
<TABLE BORDER=0 WIDTH="100%" CELLSPACING=0 CELLPADDING=0>
<TR><TD HEIGHT=1 WIDTH="100%" BGCOLOR="#000000"><TABLE HEIGHT=1 BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD></TD></TR></TABLE> </TD></TR></TABLE> |
Мало того, появилась возможность создавать вертикальные разрывы в тексте чётко фиксированного размера как менее одного BR, так и более, всё теми же таблицами, например разрыв в 4 пикселя:
|
<TABLE BORDER=0 WIDTH="100%" CELLSPACING=0 CELLPADDING=0>
<TR><TD HEIGHT=4 WIDTH="100%"><TABLE HEIGHT=4 BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD></TD></TR></TABLE> </TD></TR></TABLE> |
Теперь воображение уже ничто не могло остановить, с каждым днём на ум приходили всё новые и новые места в разметке где это можно было применить...
Наставления.
Используя в своих проджектах данный механизм однопиксельности ячеек было установлено, что метод крайне нестабилен, и требует как минимум 100% корректности остального HTML кода таблицы, так например если из приведённой таблицы в качестве первого примера убрать параметр тега TABLE - COLS=2, то в MSIE ячейка будет по прежнему однопиксельной, а в NN её растянет на ширину одного неразрывного пробела, тоже самое справедливо и для параметра ROWS=КОЛИЧЕСТВО_СТОЛБЦОВ в случае высоты в 1px. Стоит отметить, что значение HEIGHT и WIDTH во вложенной в ячейку таблице должно соответствовать такому же значению в теге TD образующем саму ячейку, так же лишний раз напомню, что браузер NN понимает только HEIGHT и WIDTH написанные заглавными литерами. В любом случае применяя эту методику, необходимо протестировать свои творения на правильность отображения как минимум в MSIE, NN и Opera (хотя о чём я говорю, не протестить свои работы в этих браузерах для любого уважающего себя HTML кодера это и так дурной тон).
Outro.
Так как на сегодняшний день, несмотря на то что прошло уже немало лет со дня первого применения данной методики, я не встретил какой-либо разумной документации или упоминания о применении данного метода создания ячеек шириной и высотой менее одного неразрывного пробела на практике, то сочту за норму, что мы и есть непосредственно те люди, которые поняли его, и применили осознано.
Оканчивая рассказ по данной теме, хочется надеяться, что возможно ЭТО кому-то да пригодиться в составлении воистину красивых и оригинальных дизайнов страниц сети...
Ищите и найдётся, пробуйте и получиться. ;-)
Рекомендуем почитать
