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

А, можем ли да поставим таблица в таблица ??
Нека опитаме.Започваме с примера с Ed.

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

Ed


Уголемяваме таблицата колкото ни е нужно.

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

Ed


Заместваме Ed с втора таблица.

<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

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

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

Ed
Това е !


Нашата таблица може да бъде и центрирана.

<CENTER>
<TABLE BORDER=3 WIDTH=200 HEIGHT=100>
<TR>
<TD>

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

</TD>
</TR>
</TABLE>
</CENTER>

Ed

Ето една ситуация където с таблица ще може да се разреши често срещан проблем.
Да кажем, че имате добрата идея да поставите анимиран gif файл на страницата си. Обаче за съжаление картинката е прекалено голяма. Тъй като анимираните gif файлове представляват серия от картинки, които се сменят една след друга (като в киното), като изграждат един комплексен файл, който изисква повече време за зареждане от Интернет. Сами разбирате, че вашите посетители няма да са никак щастливи ако е нужно да свалят картинка от 700 KB. Какъв е изходът ли ? Нарежете картинката и я поставете в таблица. След това анимирате само малка част от картинката като печелите от това, че няма наслагване на кадри върху неанимираните части. По този начин и вълкът е сит и агнето е цяло.

Ще ви стане по-ясно след като разгледате следващия пример:

Netscape срещу Microsoft?




Ето тук същата таблица, но CELLSPACING принуждава да се виждат границите на катинките.

Netscape срещу Microsoft?
Единствената част от картинката, която е анимирана са очите.

Ето ви и html кода за тази таблица.

<TABLE WIDTH=591 BORDER=0 CELLSPACING=0 CELLPADDING=0>
<CAPTION ALIGN=top><FONT SIZE=6><STRONG><EM>Netscape срещу Microsoft?</EM></STRONG></FONT></CAPTION>

<TR>
<TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD>
<TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD>
<TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD>
</TR>

<TR>
<TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD>
</TR>

</TABLE>


Ето я и схемата.

dragon4.gif

dragon3.gif
dragon5.gif
anidrag.gif

dragon2.gif


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

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

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