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

Ул. Горького д.86, оф.14 Наш E-mail +7 (4912) 25-84-24
Создание сайтов в Рязани
Создание, раскрутка, оптимизация сайтов.
Главная | Статьи | Наши работы | Цены | Заказать | Контакты
Новости

18.04/2015
Разбработка мобильной версии Желтых Страниц Рязани
и доработка личного кабинета.

10.02/2015
Новый хостинг парнтер.

Разделы:
Изготовление сайтов

Оптимизация сайтов

Раскрутка сайтов

Размещение сайтов

Спецпредложения

Оригинальный подарок к новому году


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

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



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

Существует ряд способов, позволяющих выполнить поставленную задачу, но не каждый способ может решить проблему совместимости разных браузеров. Всё дело в том, что язык 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, и в ячейках вложенных таблиц напишем произвольный текст.
Успехов в веб-дизайне!

Демьянчук Виталий


Дата публикации: 09/02/2015
Прочитано: 3844 раз
Дополнительно на данную тему:
Оптимизация сайта - поисковики, ключевые слова, метатеги, alt-ы, индексация, роботы..
Как уменьшить исходящий траффик?
Оптимизация - великая сила. HTML-код наизнанку.
Оптимизация сайта - Продвижение сайта
Переход на шаблонный дизайн
Навигация: кнопки против ссылок
Кеширование динамического сайта
Что такое каскадные таблицы стилей (CSS)
Сквозная навигация на примере
Поэтапная оптимизация сайта

Назад | Начало | Наверх