<"Как я уже сказал"
<ОГЛАВЛЕНИЕ
 

КОНСТАНТИН КРЫЛОВ

Заметки
о
веб-
искусстве

 

 

То, что
вы не хотели бы
знать о таблицах,

потому что
боялись узнать

 

Из всех видов разметки html-документа важнейшим являются для нас таблицы. Важнейшим, потому что других просто нет. Единственное, что мы можем сделать с текстом – так это поместить его в таблицу, и молить Бога, чтобы он там как-нибудь поместился, не разрушив при этом всю красоту.

Обычно бывает так. Вы задумали разместить свой текст в виде красивой узенькой колоночки, сверху поместить заголовочек, а сбоку, скажем, рисуночек. Вы воспользовались редактором (хучь Фронтпыжем, хучь чем-нибудь попристойнее), или (если вы мазохист) нотепадом. Всё сделали как надо. Разместили текст, после чего убедились, что вместо аккуратной узенькой колоночки с рисуночком получилось что-то разлапистое: рисунок съехал куда-то не туда, текст почему-то в два раза шире ожидаемого, и вообще всё крайне безобразно. Кроме всего прочего, в Эксплорере и Нетскейпе это безобразие выглядит ещё и по-разному, что совсем уж портит кровь.

Самое неприятное свойство html-таблиц состоит в том, что не существует способа абсолютно жёстко ограничить их размер (и в ширину, и в высоту). Размер таблицы определяется прежде всего размером самого крупного объекта, в ней находящегося.

Все хитрые цифирьки, которыми вы попытаетесь ограничить размеры таблицы, ровно ничего не стоят, если туда попадёт какое-нибудь крупное бревно – скажем, большой рисунок или длинное слово. И всё разъедется к свиньям.

Но это ещё не самое худшее. Если даже в таблице нет никаких сучков и брёвен, не спешите радоваться. Из всех цифирок, которые задают размеры всяких там параметров таблицы, более-менее доверять можно только одной. А именно: ширине таблицы, заданной в пикселах. Если её выставить, то можно быть уверенным (ну, почти уверенным), что таблица будет именно такой ширины. Разумеется, если её не разопрёт содержимое.

Все остальные цифирки лукавые. Достаточно какой-нибудь небольшой проблемки (не буду описывать их все, слишком их много), чтобы все эти тщательно подобранные параметры параметры перестали что-либо значить.

Вот перед Вами тут таблица. У ней задана максимальная ширина 200 пикселов.

дурь  
  ещё дурь

Но, если поместить в неё что-нибудь крупное...

акыкыкыкыкыкыкыкыкыкыкыыкыкыкыкыкыкыэлекетрык!  
  ещё дурь

она раздуется.

 

Так что, господа,

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

Рисунок для любого броузера святыня, он просто обязан отобразить его таким, каким он задан. И, что самое интересное, даже если загрузка рисунков отключена, он всё равно отобразит нужного размера пустое место.

Тут-то таблицу можно и построить строем.

Итак. Вот вам, господа, таблица:

 
   

Эта таблица будет корректно отображаться во всех броузерах, строго выдерживая ширину ячеек: 34, 26 и 57 пикселов. Никаких параметров внутри ячеек в ней не прописано. Вместо этого внутрь таблицы вставлены невидимые прозрачные палки длиной 34, 26 и 57 пикселов.

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

Код для таблички, изображённой выше, выглядит вот так:

<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><
img src="../dixi/1.gif" width="34" height="1"></td>

// 1.gif - это та самая фитюлечка 1 на 1

// width="34" - фитюлечка растягивается до нужного размера

<td>&nbsp;</td>
<td><
img src="../dixi/1.gif" width="26" height="1"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><
img src="../dixi/1.gif" width="57" height="1"></td>
<td>&nbsp;</td>
</tr>
</table>

В таком вот аксепте.

Обратите внимание на то, что распорки можно ставить в разных клеточках таблицы. Примерно так:

распорка 1
s1.gif (202 bytes)

   

 

  распорка 3
s1.gif (202 bytes)
 

распорка 2
s2.gif (189 bytes)

 

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

 

распорка
s1.gif (202 bytes)

l2.gif (272 bytes)

слева -
растопырка

l1.gif (294 bytes)

слева -
растопырка

распорка
s1.gif (202 bytes)

 

распорка
s2.gif (189 bytes)
справа -
растопырка

l2.gif (272 bytes)

Мне могут на это возразить: масса места в таблице оказывается занятой всякой фигнёй. А если хочется использовать все клеточки?

Ответ: можно по-разному. Иногда достаточно выровнять только какую-то часть таблицы, а иногда и не выравнивать её вовсе. Но если хочется иметь аккуратно отображённую таблицу строго определённого размера, иного пути нет.

 

Следующий выпуск: ФОТОШОП. ТРИ ИДИОТСКИЕ ПРОБЛЕМЫ