Построение таблиц- бесплатные уроки по созданию сайта

Картинки

Создание страницы HTML

Делаем сайт в Photoshop

Делаем сайт в M/Dreamweaver

Установка веб-сервера

Как подобрать тему для сайта

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

Регистрация сайта

Как зарабатывать на сайте

• КОЛЛЕКЦИЯ КАРТИНОК :

Флеш-алфавит

Изображения людей

Изображения компьютеров

Денежные купюры и монеты

• Инструкции по работе с :

Программа LeapFTP

FTP-клиент в Total Commander

• Скачать шрифты

Подписка на рассылку

Как создать сайт на SMC-движках, таких как, JOOMLA, PHP Fusion, установить на свой сайт форум, гостевую книгу, создать собственную рассылку, установить форму оплаты и т.д.
О выпуске этих и других уроков вы узнаете, подписавшись на рассылку

Ваше имя

Ваш e-mail

СОЗДАНИЕ САЙТА

Урок - 2

Построение таблиц

Для форматирования сайтов применяются таблицы. Таблицы оформляются тегами <TABLE> и </TABLE> Между ними теги <TR> и </TR>, а между тегами TR теги <TD> и </TD>. Между тегами <TD> и </TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.

Теги <TR> и </TR>, обозначают горизонтальную строку таблицы,а теги <TD> и </TD> - вертикальную колонку или ячейку.

Ниже показана строка таблицы, которая состоит из одной ячейки,в коде она будет располагаться так: <TR><TD>Строка из одной ячейки</TD></TR>
Строка из одной ячейки

Разделим эту строку на четыре ячейки и код будет таким:
1- ячейка 2- ячейка 3- ячейка 4- ячейка

<TR>
<TD>1- ячейка</TD>
<TD>2- ячейка</TD>
<TD>3- ячейка</TD>
<TD>4-ячейка</TD>
</TR>

Внутри тега <TABLE> прописываются атрибуты; BORDER, CELLPADDING, CELLSPACING. В коде это будет так:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

Рассмотрим значение этих атрибутов: BORDER - указывает будет ли рамка вокруг таблицы и ее размеры.

Если поставить BORDER=0, то таблица будет выгляветь так:

Если поставить BORDER=1, то таблица будет выгляветь так:

Рамки можно задать любой цвет, делается это значением BORDERCOLOR="#CC6666", это будет выглядеть так:

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

Поставим CELLSPACING=0, будет так:

1- ячейка

2- ячейка

3- ячейка

4- ячейка

Поставим, допустим CELLSPACING=6, будет так:

1- ячейка

2- ячейка

3- ячейка

4- ячейка

CELLPADDING - указывает какой будет отступ от краев ячеек, для содержимого этих ячеек.
Если поставить CELLPADDING=0,текст в ячейках будет распологаться так:

1- ячейка 2- ячейка 3- ячейка 4- ячейка
Как видите, текст прижат к краям ячейки и слева и сверху.

Если поставим CELLPADDING=10 то будет так:
1- ячейка 2- ячейка 3- ячейка 4- ячейка

Таблице нужно указать размеры, ширину - WIDTH="" и высоту - HEIGHT="", а также цвет - BGCOLOR="#". Для каждой ячейки, можно задавать свой размер и цвет. Все эти значения прописываются внутри тега <TD>, так:
<TD width= 650 height=550 bgcolor="#00FFCC">

Вот общий вид кода для простейшей таблицы из 3 строк по одной ячейки в каждой.

<HTML>
<HEAD>
<TITLE>Изучение таблиц</TITLE>
</HEAD>
<BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>
<TD WIDTH=300 HEIGHT=80 BGCOLOR="#"></TD>
</TR>

<TR>
<TD WIDTH=300 HEIGHT=25 BGCOLOR="#"></TD>
</TR>

<TR>
<TD WIDTH=300 HEIGHT=250 BGCOLOR="#"></TD>
</TR>

</TABLE>

</BODY>
</HTML>

Попробуйте сами написать этот код, цвета проставте свои, размеры можете тоже проставить свои.

Страницы: 1 2

Для оформления сайта

страницы сайта

Сейчас на этой странице

Новости СМИ2