Привет: Гость | Регистрация | Вход

Привет: Гость

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь! Гости не могут просматривать РАЗДЕЛЫ СТАТЕЙ И ФАЙЛЫ

Форум переехал! Новый адрес www.aahc.comze.com ЗАХОДИТЕ ТУДА! МЫ ВАМ РАДЫ!
Меню сайта



 

Обновить страницу!
 



  • Страница 1 из 1
  • 1
Модератор форума: GrinGo  
Хитрости табличного дизайна. (формируем рамку таблицы)
GrinGoДата: Четверг, 20.11.2008, 20:41 | Сообщение # 1
Admin
Группа: AdmInS
Сообщений: 253
Репутация: 2
Статус: Offline
Хитрости табличного дизайна. (формируем рамку таблицы)

Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте
(Например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).
Однако,
стандарт 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"> </td>
</tr>
</table>

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

<td valign="top"> </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>

Удачи!


Злой одМиН
 
  • Страница 1 из 1
  • 1
Поиск:






 
© Алькапоша 2008 год
   



  • Каталог сайтов Всего.RU
  • автоматический обмен webmoney e-gold