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

Деcети урок » (5069 посещения)

Сега ще си поиграем малко ... само няколко неща, за да видим какво ще се случи.

Ето един неномериран списък:
Съставки за ябълков пай

• Ябълки
• Брашно
• Захар
• Канела

Това разбира се изглежда много добре, но какво ще стане ако искаме да попреместим този текст...

Защо го местим ли? Защото ще искаме да бъде поставен до снимка на...     ябълков пай.

Съставки за ябълков пай Ябълки Брашно Захар Канела

За да направим всичко това ще ни е нужна таблица!
Когато построяваме таблица е препоръчително да "включим" контурите (border=1), за да следим вместването на обектите в нея. След като е готова - ще ги махнем.

Съставки за ябълков пай Ябълки Брашно Захар Канела

Нека сега обясня нещата едно по едно. Наистина е много просто!
Започваме със старият пример за Ed. Той чу за пая и доприпка ...

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

Заместваме Ed с неномерирания списък.

<TABLE BORDER=3>
<TR>
<TD>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>

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

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>

Сега вече имаме нужда от втора клетка. Искаме лявата клетка да бъде малко по-малка от дясната.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>

Сега му е времето да поставим картинката в първата клетка.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>

Съставки за ябълков пай Ябълки Брашно Захар Канела

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

<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>

Съставки за ябълков пай Ябълки Брашно Захар Канела

Готови сте! Хапнете пай, отдъхнете, но не забравяйте онова линкче в дясно...