RTFM! статьи, советы, скрипты
::Заработок с помощью сайта ::JScript по-русски! ::Все русские мануалы::
МЕНЮ
О САЙТЕ
НОВОСТИ
СТАТЬИ
КНИГИ
АППЛЕТЫ
СВЯЗЬ

СЧЕТЧИКИ
Rambler's Top100
Рейтинг@Mail.ru
Яндекс цитирования

HTML: как сделать таблицу с рамкой в один пиксель

Автор: pauk Сайт: http://www.pauk2001.h1.ru/     Рейтинг: N/A из 7       <<НАЗАД
   
   Таблицы… таблицы… таблицы… Куда нам без них? Вот именно, почти никуда. Вы часто видели корпоративный сайт без табличной верстки? Лично я - редко. Таблица - вещь капризная и непостоянная. Любит аккуратность и внимательность. Не любит background'ов и настороженно относится к Netscape Navigator'у. Нюансов у табличной верстки вагон и маленькая тележка. Многие из них вам, я не сомневаюсь, известны. Однако всех, видимо, не знает никто, потому как браузеры интерпретируют HTML так, как им заблагорассудится. И отсутствие тэга </table> так удивляет Netscape, что таблицу он не отображает вообще.
   
   Однако, углубимся в детали… На повестке дня две проблемы:
   
   1. Изготовление таблицы с однопиксельными рамками;
   2. Изготовление таблицы с бэкграундом для Netscape, который, если реализовывать это стандартно, пихает оный бэкграунд в каждую ячейку таблицы…
   
   Итак, однопиксельные рамки… Иногда хочется, чтобы таблица была нестандартная, чем-то отличалась от других. Или просто стандартные рамки плохо вписываются в ваш дизайн... Что делать? Возможно, таблица с однопиксельной рамкой произвольного цвета - именно то, что вам нужно. А делается она вот так:
   
   <table cellspacing=0 cellpadding=0 border=0 bgcolor=green width=196><tr><td>
   <table cellspacing=1 cellpadding=0 border=0 bgcolor=white width=100%>
   <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
   </tr>
   <tr>
    <td>a</td>
    <td>a</td>
    <td>a</td>
    <td>a</td>
   </tr>
   <tr>
    <td>b</td>
    <td>b</td>
    <td>b</td>
    <td>b</td>
   </tr>
   <tr>
    <td>c</td>
    <td>c</td>
    <td>c</td>
    <td>c</td>
   </tr>
   </table></td></tr></table>
   
   Вроде все просто. Делаем вложенные таблицы. Для той, что самая первая, задаем такой цвет фона, в который выкрасится наша рамка, в данном случае - зеленый (bgcolor=green). Во второй делаем расстояние между ячейкам равное 1 (cellspacing=1) и задаем цвет фона нашей таблицы, в данном случае - белый (bgcolor=white). Вторая таблица с единичным расстоянием между ячейками как бы накладывается на первую, зеленую. В результате чего в эти просветы проглядывает первая зеленая таблица, создавая рамки изумительного зеленого цвета ;).
   
   
   Но... Протестировав эту радость в MSIE и в Netscape мы с ужасом и непомерным удивлением для себя обнаруживаем, что работает она только в Netscape... Гробовое молчание. Вот оно! Хоть в чем-то Netscape обошел Explorer! Однако надо что-то делать... Решение такое:
   
   <table cellspacing=0 cellpadding=0 border=0 bgcolor=green width=196><tr><td>
   <table cellspacing=1 cellpadding=0 border=0 width=100%>
   <tr>
    <td bgcolor=white>1</td>
    <td bgcolor=white>2</td>
    <td bgcolor=white>3</td>
    <td bgcolor=white>4</td>
   </tr>
   <tr>
    <td bgcolor=white>a</td>
    <td bgcolor=white>a</td>
    <td bgcolor=white>a</td>
    <td bgcolor=white>a</td>
   </tr>
   <tr>
    <td bgcolor=white>b</td>
    <td bgcolor=white>b</td>
    <td bgcolor=white>b</td>
    <td bgcolor=white>b</td>
   </tr>
   <tr>
    <td bgcolor=white>c</td>
    <td bgcolor=white>c</td>
    <td bgcolor=white>c</td>
    <td bgcolor=white>c</td>
   </tr>
   </table></td></tr></table>
   
   Чтобы угодить браузеру компании Мелкософт, приходится пихать bgcolor в каждую ячейку, что не очень удобно. Однако работает везде... Да, не забудьте убрать bgcolor во второй таблице, а то ничего не выйдет.
   
   


<<НАЗАД      ОЦЕНИТЬ СТАТЬЮ    ВЕРСИЯ ДЛЯ ПЕЧАТИ>>
Статья прочитана :  раз.




пейкюлю



 
 
 
 
 
pauk ©® 2000-2015. All rights reserved.
При перепечатке ссылка на сайт и указание обязательны.
Мнение администрации сайта не всегда совпадает с мнением автора.
Орфография и пунктуация - авторские.
Администрация не несет никакой ответственности за использование материалов.
.
Protected by Copyscape DMCA Takedown Notice Infringement Search Tool