Да добавим таблици - Урок 3

Да се върнем към стария Ed.

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

Ed


Ще махнем всякакви атрибути за align за да може кодът да е по-изчистен и ясен. Знаем какво ще се случи - браузера ще приложи стойностите по подразбиране.

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

Ed


Сега да направим една примерна таблица.

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

Ed


Да подразделим този ред на две клетки. Tom е приятел на Ed, но иска отделна клетка.

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

Ed Tom


Когато няма изрични инструкции за широчината на клетките, те обикновенно са различни по размер. Ето защо добра идея е да се указва широчината за всяка клетка. Само че, винаги добре пресмятайте стойностите за да не се получат смешни резултати.

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

Ed Tom


Този WIDTH атрибут може да бъде изразен и в проценти.

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

Ed Tom


Нека дадем на Ed по-голяма клетка защото все пак той е с нас от самото начало.

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

Ed Tom


Сега и Rick се върна и ще поиска собствена клетка. Трябва да решим колко пространство от редът ще можем да му отделим. Мисля че 20% е съвсем честно. Ще ги вземем от процентите на Ed. Сами разбирате, че сборът от всички проценти трябва да е равен на 100.

<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>

Ed 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


Нека върнем Мо и премахнем всички атрибути освен тези за 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


<--ПРЕДИШЕН        СЛЕДВАЩ-->

Въведение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Полезни връзки Бърз html указател
БЕЗПЛАТНИ РЕСУРСИ ЗА ВАШАТА WEB СТРАНИЦА