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

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

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

Статьи

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


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

Хитрости табличного дизайна,
Расположение 2 таблиц с данными в одной строке

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

Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок.

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

Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить "каркасом" дизайна сайта.

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

Расположение двух таблиц в одной строке

Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border="0").
Для тега <td> (тег столбца таблицы) указываем атрибут valign со значением "top", отвечающий за то, чтобы информация располагалась с верхнего края таблицы.

Вот, примерно, какой html-код вы должны были получить:

<table width="366" height="46" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>

В каждой ячейке (между тегами <td>&nbsp;</td>) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.
Посмотрите, какая таблица должна получиться у вас:

 
 

Если Вы хотите, чтобы видимые таблицы находились на некотором расстоянии друг от друга, тогда измените значение атрибута cellspacing, отвечающего за расстояние в пикселях между двумя ячейками таблицы, тега <table> нашей основной таблицы, т. е той, в которой содержатся 2 наши видимые таблицы.

Вот, что получилось у меня:

 
 

Атрибут "cellspace" в основной таблице равен 2.

Привожу весь html-код, разработанный нами в данный момент:

<table width="460" height="49" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="49" valign="top"><table width="230" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="48" valign="top">&nbsp;</td>
</tr>
</table></td>
<td valign="top"><table width="230" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="48" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

Видите, ничего сложного. А главное - код читается во всех браузерах.

Колонки с текстом

На основе этого мы можем с Вами создать колонки с текстом.

Для этого в полученных нами таблицах меняем параметр "border" тега <table>.
Во всех таблицах поменяем значение атрибута border с 0 на 1, и в ячейках вложенных таблиц напишем произвольный текст.

Вот, что в результате должно у вас получиться:

Колонка 1

Текст, написанный в первой колонке вложенной таблицы.

Колонка 2

Текст, написанный в первой колонке вложенной таблицы.

Довольно привлекательно, не правда ли?

Успехов в веб-дизайне!

Спасибо!

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

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


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

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

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

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

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

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

Реклама:
Рекомендуем Батарейные моды smoking-shop.ru/batareynye-mody/ купить  andсвежий сайт отборного порно видео онлайнand

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

.::Поиск::.
.::Новости::.
  
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+.