Самообучение HTML училище

Осми урок » (5120 посещения)

Да се върнем към добрия, стар 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

Сега не се колебайте, а докато сте във форма, чукнете онова нещо в дясно.