Для форматирования сайтов применяются таблицы. Таблицы оформляются тегами<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>
<TD>1- ячейка</TD>
<TD>2- ячейка</TD>
<TD>3- ячейка</TD>
<TD>4-ячейка</TD>
</TR>
Внутри тега <TABLE> прописываются атрибуты; BORDER, CELLPADDING, CELLSPACING. В коде это будет так:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
Рассмотрим значение этих атрибутов: BORDER - указывает будет ли рамка вокруг таблицы и ее размеры.
Если поставить BORDER=0, то таблица будет выгляветь так:
| ||
Если поставить BORDER=1, то таблица будет выгляветь так:
| ||
Рамки можно задать любой цвет, делается это значениемBORDERCOLOR="#CC6666", это будет выглядеть так:
|
CELLSPACING - указывает будет ли пространство между ячейками таблицы и размеры этого пространства, или ячейки будут плотно прилегать друг к другу.
Поставим CELLSPACING=0, будет так:
Поставим CELLSPACING=0, будет так:
| 1- ячейка | 2- ячейка | 3- ячейка | 4- ячейка |
Поставим, допустим CELLSPACING=6, будет так:
| 1- ячейка | 2- ячейка | 3- ячейка | 4- ячейка |
CELLPADDING - указывает какой будет отступ от краев ячеек, для содержимого этих ячеек.
Если поставить CELLPADDING=0,текст в ячейках будет распологаться так:
Как видите, текст прижат к краям ячейки и слева и сверху.
Если поставить CELLPADDING=0,текст в ячейках будет распологаться так:
| 1- ячейка | 2- ячейка | 3- ячейка | 4- ячейка |
Если поставим CELLPADDING=10 то будет так:
| 1- ячейка | 2- ячейка | 3- ячейка | 4- ячейка |
Таблице нужно указать размеры, ширину - WIDTH="" и высоту - HEIGHT="", а также цвет - BGCOLOR="#". Для каждой ячейки, можно задавать свой размер и цвет. Все эти значения прописываются внутри тега <TD>, так:
<TD width= 650 height=550 bgcolor="#00FFCC">
<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>
<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>
Попробуйте сами написать этот код, цвета проставте свои, размеры можете тоже проставить свои.
Комментариев нет:
Отправить комментарий