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

Седми урок » (4795 посещения)

Нека първо да добавим кoнтур (border) за да заприлича нашето творение наистина на таблица. Не забравяйте, че всеки път когато правите промени, трябва да ги запаметите (save в Notepad) и след това да натиснете reload на браузера си.

<TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Какво ще кажете за по-дебел контур?

<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Какво ще кажете за ОЩЕ ПО-ДЕБЕЛ контур?

<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

В следващия случай контура изобщо липсва.

<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Нека се спрем за сега на по-приемлива дебелина на рамката.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

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

<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Определянето на широчината (дебелината) на таблицата е лесно и става по следният начин.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Какво ще кажете за това ?

<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>

Ed, Rick and Tom

Но нека се отървем от приятелите на Ed за сега.

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

Ed

Да редуцираме широчината на таблицата на 50% от широчината на активното поле на браузера.

<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Сега пък да укажем широчина от 50 пиксела, вместо 50 процента.

<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Сега 100 пиксела.

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

Ed

Както виждате, има два начина за указване на широчината на една таблица. Всеки стил си има своите приложения. Кога да използвате единия или другия, ще се наложи да решавате сами.
Можем също да се бъркаме и в определянето на височината.

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

Ed

Сега се сещам за едно призведение на Стивън Райт ...
"На следващия ден разхождах кучето си по перваза на покрива на къщата. Някои хора се страхуват от височините. Не и аз. Това, от което се страхувам са дебелините."

Можем да контролираме къде в дадената клетка да се появи текста.

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

Ed

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

Ed

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

Ed

Както сами виждате, стойността по подразбиране (default) е ALIGN=LEFT. Само да ви припомня, че стойността "по подразбиране" е тази стойност, която браузерът прилага, когато изрично не му е указана някоя друга стойност.
Можем да контролираме също, къде да се разположи текста вертикално в дадената клетка.

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

Ed

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

Ed

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

Ed

Стойността по подразбиране е MIDDLE (в средата).

Разбира се, във всяка таблица може да се поставят и картинки. Те се разполагат и манипулират по абсолютно същия начин.

<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif" WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>

Сега е момента да се отбележи, че е добре винаги да се указват размерите на картинката. Това спестява време на браузера при зареждането на страницата от Интернет. Няма да се впускам в подробности, но това е начина да избегнете някои малки, но неприятни изненади.