Оценка сайта и рассылки, подписка на рассылку, статьи по веб-дизайну, полезные скрипты PHP и javascript
Оптимизатор сайта о раскрутке сайта и непоисковой оптимизации

Панель опций Сделать стартовой страницей Панель опций подписаться на RSS-ленту RSS-лента                         
 
.::Реклама::.

www.liex.ru - автоматическое размещение статей с прямыми ссылками
.::Наша кнопка::.
Наша кнопка
Хотите помочь нашему сайту? Установите нашу кнопку на свой сайт.
Получить код
.::Полезная ссылка::.
Лучший редактируюмемый каталог ресурсов
Лучший редактируемый людьми каталог ресурсов Интернета
.::Рекомендуем::.
.::Статистика::.

Статьи

Библиотека веб-мастера - "море" информации по веб-дизайну, которая пополняется посетителями сайта.


Главная :: Библиотека веб-дизайнера :: Вёрстка веб-документа

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

Автор: Демьянчук Виталий,
администратор сайта.
http://vitaweb.pp.ru

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

Удачи!

Дата публикации: 28.02.06

Эта статья написана автором сайта и являются его собственностью.
При публикации этой статьи на других сайтах указание имени автора и ссылка на сайт http://vitaweb.pp.ru/ обязательны.


Что почитать ещё?

  1)Подсказки по работе в системе Google Adsense;
2)Как проиндексировать сайт в поисковой базе Google менее чем за 24 часа?;
3)Доменные имена. Как выбрать хорошее имя для своего сайта;
4)SEO-специалист делится своими секретами;
5)Двадцать шесть способов получения качественного трафика на ваш сайт.

Главная :: Библиотека веб-дизайнера :: Вёрстка веб-документов

"Веб-дизайн - это просто! Теория и практика"
Эта рассылка создана специально для тех, кто не хочет иметь проблем с созданием, поддержкой и раскруткой своего сайта. Полезные и интересные статьи по веб-дизайну в Ваш почтовый ящик. Мы ответим на все ваши вопросы, связанные с разработкой и поддержкой сайта;

RSS-канал
Все свежие новости об обновлениях на сайте, а также новости на тему веб-дизайна, хостинга, web-программирования и других тем тем, связанных с веб-дизайном. Если вы следите за нужной информацией, то получите информацию первым через наш RSS-канал, даже не заходя на наш веб-сайт.
Экономьте Ваше время с Vitaweb!

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

Реклама:
Рекомендуем Подарки при покупке семок semenarnia.online 


Связь с автором сайта:

.::Поиск::.
.::Новости::.
  
05.08.2013
Новое онлайн интервью: вопросы Роману Ширяеву (Пузату);

04.07.2013
Теперь вы можете снова подать заявку на БЕСПЛАТНУЮ оценку сайта;

15.04.2013
Социальная сеть: опыт создания высоконагруженного проекта Подробнее.


.::Опрос::.
"На какой язык вы ориентируетесь при создании сайта? "

PHP;
PERL;
C;
ASP;
AJAX;
JAVA;
Python;
Javascript/Vbscript;
"Чистый" HTML.

.::Реклама::.



RotaPost
Копирование информации с этого сайта на другие ресурсы разрешено только при наличии видимой ссылки на наш сайт.
Электронная почта редактора сайта: audit(@)vitaweb.pp.ru (уберите скобки). 2005-2014 год. 18+.