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

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

Ето един неномериран списък:

Съставки за ябълков пай


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

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


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

Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела
За да направим всичко това ще ни е нужна таблица!


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

Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела
Нека обясня сега нещата едно по едно. Наистина е много просто!


Започваме със старият пример за Ed.

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

Ed


Заместваме 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>

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


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

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