Таблицы - Урок 5


Теперь мы собираемся попробовать несколько вещей только для того, чтобы посмотреть, что произойдет. Есть небольшой неупорядоченный список
Компоненты Яблочного Пирога:


Это весь прекрасно и превосходно, но что, если мы хотим поместить это здесь ......

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица


Потому что мы хотим, чтобы список был рядом с изображением пирога.

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Для этого мы могли бы использовать таблицу.


При изучении или формировании таблицы, всегда удобнее, когда рамки включены.

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица

Давайте сформируем это за один шаг одновременно. Это действительно довольно просто.


Начните с малого 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>

Компоненты Яблочного Пирога:
  • Яблоки
  • Мука
  • Сахар
  • Корица


Теперь можно скопировать изображение пирога - applepie.gif в вашей рабочей папке.
Вставьте изображение в первую ячейку.

<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 Урок 5 Урок 6 Уок 7 Указатель
Таблицы, Формы и Итак, Вы хотите построить Web Страницу!