Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

Хитрости табличного дизайна. (формируем рамку таблицы)

Источник: realcoding.net

Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.
Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.
Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" - этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.

Цветная граница рамки таблицы.
Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.

<table width=255 height=72 border=0 align=left cellpadding=0 cellspacing=2 bgcolor=#000000>
<
tr>
<
td valign=top>&nbsp;</td>
</
tr>
</
table>

Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).
Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.
Зальём таблицу черным цветом, используя атрибут "bgcolor" Вообще вы можете выбрать любой другой цвет, в зависимости от того, какого цвета будет ваша рамка.

<td valign=top>&nbsp;</td>

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

Вставляем в ячейку нашей таблицы другую таблицу.

<table width=251 height=69 border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF>
<
tr>
<
td height=69><div align=center>Текст</div></td>
</
tr>
</
table>

Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.

Вот и всё. Наша таблица готова. Теперь мы имеем таблицу, рамка которой будет отображаться во всех браузерах одинаково.

Напоследок, приведу весь код, который мы создали.

<table width=255 height=72 border=0 align=left cellpadding=0 cellspacing=2 bgcolor=#000000>
<
tr>
<
td valign=top><table width=251 height=69 border=0 cellpadding=0 cellspacing=0 bgcolor=#FFFFFF>
<
tr>
<
td height=69><div align=center>Текст</div></td>
</
tr>
</
table></td>
</
tr>
</
table>

Удачи!



Похожие статьи:
- Создание простого чата на ASP
- Сверхдинамичные веб-интерфейсы
- "Грабим" странички
- Поисковая оптимизация сайта
- Использование шаблонов дизайна в ASP.NET
- BB-коды
- Как узнать по каким запросам находят мой сайт в поисковых машинах?
- Что такое клоакинг?
- Пишем элементарный рассылщик
- И снова отказываемся от модуля CGI?
- Форматируем дату, полученную из БД
- Потенциальная уязвимость php-скриптов
- Десять правил написания безопасного кода на PHP


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]