учебник : Как стать Хакером

Главная » Мастерская » Статьи » ТАБЛИЦЫ (HTML Уроки)

ТАБЛИЦЫ (HTML Уроки) - урок № 3

Давайте вернемся к простому старому Ed.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD> </TR> </TABLE>

И для ясности и простоты давайте удалим атрибуты выравнивания. Мы знаем, что случится, потому что мы знаем значения по умолчанию. Между прочим, МЕТКА сообщает браузеру что выполнить. АТРИБУТ следует внутри МЕТКИ и сообщает браузер как сделать это.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Теперь мы сделаем нашу таблицу больше.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> </TR> </TABLE>

Друг Ed а Tom хочет себе собственную ячейку.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD>Ed</TD> <TD>Tom</TD> </TR> </TABLE>

Tom

Когда браузеру не даны команды, каждая ячейка может (но не всегда) быть отличной по размеру. Прекрасная идея всегда определять размер каждой ячейки. Удостоверитесь, что ваша арифметика правильна или люди будут видеть не то, что Вы хотите!

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=150>Ed</TD> <TD WIDTH=150>Tom</TD> </TR> </TABLE>

Tom

Эти атрибуты WIDTH могут также быть выражены в процентах.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=50%>Ed</TD> <TD WIDTH=50%>Tom</TD> </TR> </TABLE>

Tom

Дадим Ed большую ячейку, так как он был здесь с самого начала.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=80%>Ed</TD> <TD WIDTH=20%>Tom</TD> </TR> </TABLE>

Tom

Теперь Rick. Мы должны решить, сколько строк мы выделим ему, полагаю, что 20 % - нормально. Удостоверитесь, что скорректировали Ed также.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR> </TABLE>

Tom

Rick

Добавим еще три ячейки.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Атрибуты WIDTH первой строки переносят на вторую строку.

Если Mo убрать, мы все еще будем иметь абсолютно хорошую таблицу, но только с пустой ячейкой.

<TABLE BORDER=3 WIDTH=300 HEIGHT=75>

<TR> <TD WIDTH=60%>Ed</TD> <TD WIDTH=20%>Tom</TD> <TD WIDTH=20%>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly

Давайте поместим Mo обратно и удалим все атрибуты за исключением BORDER.

<TABLE BORDER=3>

<TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Затем - пара атрибутов с именами CELLPADDING и CELLSPACING. Оба используются в метке <TABLE>. CELLPADDING - количество пустого пространства между рамкой ячейки и содержанием ячейки.

<TABLE BORDER=3 CELLPADDING=12>

<TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

По умолчанию значение для этого атрибута 1.

Если мы подставляем CELLSPACING вместо CELLPADDING мы получаем несколько отличный эффект.

<TABLE BORDER=3 CELLSPACING=12>

<TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

Значение по умолчанию для атрибута CELLSPACING - 2..

Мы, конечно, можем использовать эти атрибуты в комбинации.

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

<TR> <TD>Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR>

<TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR>

</TABLE>

Ed	Tom	Rick
Larry	Curly	Mo

[назад] [дальше]