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

Ето това, което направихме до сега...

<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

...което ни дава:

Ed




Нека първо да добавим к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>

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


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

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