I2R Web Creation - еженедельный сетевой журнал для вебмастеров

   
Извращение с таблицами 3

Автор: Alan

Вот решил продолжить свой рассказ о извращениях с таблицами. Тем кому интересно что плодит мой бесспорно нездоровый организм советую посетить мой сайт http://www.designer.vov.ru/index2.shtml?first или написать мне телеграмму spider@vov.ru 

Таблица с тонкой рамкой обычный вариант:
 
   
   

Секрет заключается во вложенности таблиц. Мы вкладываем в простую таблицу( с бэкколром цвета рамки) таблицу с размерами 100% и расстоянием между ячейками равным 1. Закрашиваем ячейки (не всю таблицу) нужным вам цветом, в данном случае это белый.

Плюс этого варианта заключается в правильном отображении в такой гадости как NN =)

 

Таблица с тонкой рамкой усложнённый вариант.

 Содержание

Тут прикол тоже во вложенности, но он трудней так, как тут вам самому приходится создавать разность в 1 пиксель между основной и вложенной таблицей.
Рецепт:
Мы создаём одну таблицу(T2) с нулевыми рамками, но с фоном того цвета, которого должна быть рамка у нашей основной таблицы. После вставим в таблицу (Т1) ещё одну таблицу (Т3) тоже без рамок и с цветом фона как у вашего документа. Теперь приступим к самому интересному. Зададим размеры таблиц. У таблицы (Т2) размеры будут такие width="246" height="95", а у таблицы (Т3) такие width="244" height="93". Заметили "разрыв" в width и height первой и второй таблицы? Если да, то запомните его (эта информация будет согревать вам душу холодными зимними вечерами :)

Плюс: :)) ту возможны всяческие извращения!!
Например, вы хотите чтобы не было видно той или иной части рамки.. Легко, как говорится "как два байта переслать" :) Просто надо сделать меньше "разрыв" и выставить выравнивание по горизонтали или по вертикали (зависит от того чо вам надо :) В результате вы можете получить таблицу без верхней или нижней или правой или левой части рамки. !!!Эта фишка работает и в ослике NN в отличие от методов CSS (которые пашут только в некоторых експлорерах, но об этом поздже).

Цветная HR для NN. 

Это делается так:

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

Закладки.

           
 

 Описывать облом, это просто до идиотизма...

А если сильно постараться можно сделать так:

 
 
 

 

Вертикальная линия.

 Делается таблица
 и один столбец (закрашеный)
 должен быть шириной в
 1 пиксель.
Объёмная рамка в IE без CSS.
 Вот так это  делается, сынок..
   

 

Делаем отступ.

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

Несколько советов по работе с таблицами.
  1. Есть несколько способов компоновки данных на странице. Первый- в таблице эластичной (размеры заданы в процентах) , второй- фиксированный (размеры заданы в пикселях). Я отношусь к той породе вымирающих дизайнеров, которые делают страницы под разрешение 640х480, и потому если и заключаю содержание в фиксированную таблицу, то её ширина <= 640 . Если использовать эластичную таблицу, то она сама подогнется к размерам экрана.
  2. Есть маленький минус в заключении всего содержания страницы в одну большую таблицу- пока не загрузится вся таблица вы не увидите ни капли из её содержимого, отсюда вывод- заключайте всё в маленькие таблицы, которые будут постепенно догружаться, или ваще не используйте таблицы (и такое возможно с помощью CSS).
  3. Если вы дизайнер а не чмо, то вы делаете страницы и под всеми любимый NN. Если это так, то вы должны помнить, что он (NN) не поддерживает цвет рамки (это только одна, но довольно весомая причина ненавидеть NN :)
  4. Помните, что если в таблицу ничего не вставить, её не будет видно. Если там не должно ничё быть вставте  &nbsp;
  5. Если вы не поняли ни слова из того что я тут написал, то есть 4 варианта: вы не знаете HTML, вы не умеете читать, вам это просто не надо, я галимо пишу, и мне нужно руки под поезд положить, а клаву облить бензином и поджечь :) Если вы всётаки чаво-то не допоняли, пишите я помогу запутаться вам ещё больше и вы возненавидите меня, HTML, своих папу и маму и пойдёте повеситесь...

Автор: Alan
http://www.designer.vov.ru/index2.shtml?first

 

© журнал принадлежит I2R Web Creation
по всем вопросам обращаться А. Кузьмин