Создание таблицы

Создать таблицу очень просто. Помните вы создали свою первую страничку? Вот теперь её надо открыть. В меню программы выбираете - вставка - таблица. Это в Adobe Dreamweaver, в других программах тоже есть нечто подобное. Затем выбираете количество столбцов, строк, ширину таблицы и т.д. Нажимаете - ОК и всё, таблица вставлена.

Хочу сразу обратить ваше внимание на ширину таблицы. Если хотите сделать сайт - резинку, то выбираете 100%, или 90%, или 87%, в общем не важно. Главное, что бы ширина измерялась в процентах. И получается резиновый сайт. На предыдущей страничке я останавливался на этой теме более подробно.

Если хотите сделать сайт с фиксированным размером, то ширину надо выставлять в пикселях (рх). Обычно делают 600 - 1000 рх.

На количество столбцов и строк особого внимания не обращайте. Ячейки в любой момент можно объединить, или наоборот разбить на дополнительные столбцы и строки.


Вот простой пример. Таблица - три строки, два столбца.

   
   
   

Объединяем ячейки в верхней и нижней строке. Затем делаем ширину левой средней ячейки, к примеру - 10%. Разбиваем её на две строки. И ниже вы увидите уже почти готовый сайт. Осталось только наполнить контентом и готово.

Шапка сайта (название)
Меню Контент (статьи, рассказы, очерки и т.д.)
Реклама
Подвал (счётчики и т. д.)

Всё просто. Не правда ли? Комбинировать можно по разному. Тут у кого какой полёт фантазии.


Если хотите, что бы границ вашей таблицы не было видно. Установите толщину границы - 0. Честно говоря лучше всегда ставить ноль. А выделять ячейки фоном, или цветом. Так как некоторые браузеры отображают границы довольно убого.

Шапка сайта (название)
Меню Контент (статьи, рассказы, очерки и т.д.)
Реклама
Подвал (счётчики и т. д.)

Тут толщина границы - 0. А расстояние между ячейками - 3. В общем экспериментируйте. Как говориться - на вкус и цвет товарищей нет :)


Что бы ячейки отличались друг от друга, можно установить фон разного цвета. Или использовать изображение, или фото.

Шапка сайта (название)
Меню Контент (статьи, рассказы, очерки и т.д.)
Реклама
Подвал (счётчики и т. д.)

На верхней таблице я использовал фон. На нижней фоновое изображение.

Шапка сайта (название)
Меню Контент (статьи, рассказы, очерки и т.д.)
Реклама
Подвал (счётчики и т. д.)

А фоне и фоновом изображении мы поговорим чуть позже. Тут главное понять, как всё работает. Поэтому смело экспериментируйте. Тут главное опыт. На пальцах всё так просто не объяснишь :)


Напоследок немножко о тегах. Дело в том, что не всегда удаётся выделить именно нужную таблицу. Поэтому проще поправить значение тега, чем возиться с таблицей.

table width="100%" - это ширина таблицы. Если без - %, значит ширина будет идти в пикселях.

border="1" - толщина границы.

cellspacing="1" - расстояние между ячейками.

cellpadding="1" - внутри ячейки.


А это общий вид таблицы.

<table width="100%" border="3" cellpadding="0" cellspacing="0"> // это размеры таблицы
<tr>
<td colspan="2" align="center" valign="middle">Шапка сайта (название)</td>
</tr>
<tr>
<td width="10%" align="center" valign="middle">Меню</td> // ширина левой средней ячейки
<td rowspan="2" align="center" valign="middle">Контент (статьи, рассказы, очерки и т.д.)</td>
</tr>
<tr>
<td align="center" valign="middle">Реклама</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">Подвал (счётчики и т. д.)</td>
</tr>
</table>

Сильно во всё это не всматривайтесь и не вникайте :) Просто для наглядности написал код таблицы. Видите теги <tr> и </tr>, теги могут быть любые, например <td> и </td> и т.д. Просто запомните. Первый тег открывающий - <tr>. Второй тег, с чёрточкой закрывающий - </tr>. Это просто на будущее, что бы не путались :)

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP