Ok, наберём...
<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
...и оно дает нам :
Вначале, чтобы
это выглядело как таблица, дайте ей рамку. Каждый раз, когда Вы делаете
изменения и хотите видеть, как они выглядит, Вы можете нажимать кнопку
Reload на вашем браузере.
<TABLE BORDER=1>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Как насчет большей рамки?
<TABLE BORDER=5>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Как насчет ОГРОМНОЙ рамки?
<TABLE BORDER=25>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
А как без рамки?
<TABLE BORDER=0>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Вы могли видеть, значение по умолчанию без рамки.
Давайте остановимся пока на скромной
рамке.
<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Когда размеры не определены, таблица
столь велика, как требуется.
<TABLE BORDER=3>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Определение
размера таблицы довольно просто хотя.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Как относительно этого?
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed, Rick and Tom</TD>
</TR>
</TABLE>
Давайте избавимся пока от друзей
Ed.
<TABLE BORDER=3 WIDTH=75%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Давайте уменьшим размер таблицы
до 50 % окна браузера.
<TABLE BORDER=3 WIDTH=50%>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Теперь определим ширину 50 вместо
50 %.
<TABLE BORDER=3 WIDTH=50>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Теперь 100.
<TABLE BORDER=3 WIDTH=100>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Как Вы можете видеть, имеются два способа определения ширины таблицы.
Какой стиль использовать для этого сейчас не существенно.
Мы можем также
определять высоту.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Мы можем управлять,
где должны появиться данные в ячейке.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=CENTER>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100
HEIGHT=75>
<TR>
<TD ALIGN=RIGHT>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100
HEIGHT=75>
<TR>
<TD ALIGN=LEFT>Ed</TD>
</TR>
</TABLE>
Как Вы можете видеть, значение по умолчанию - ALIGN=LEFT.
Мы можем также
управлять и вертикальным расположением данных в ячейке..
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100
HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>Ed</TD>
</TR>
</TABLE>
<TABLE BORDER=3 WIDTH=100
HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>
Значение по умолчанию - середина.
Изображения также можно размещать
в ячейке данных таблицы и можно управлять их размещением. В папке, которая
содержит этот документ, Вы найдете малое изображение с именем ed.gif.
Скопируйте его в рабочую папку (в ту, куда Вы поместили tables1.htm).
Вставьте метку IMG для Ed.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE><IMG SRC="ed.gif"
WIDTH=32 HEIGHT=32></TD>
</TR>
</TABLE>
Я полагаю, что теперь самое время, подчеркнуть, что хорошая практика
включить размерные атрибуты со всеми метками изображения. Я не буду говорить
о деталях, но выполнение этого правила упрощает загрузку для браузера и
позволяет избегать некоторые неожиданности.
[назад] [дальше]
ТАБЛИЦЫ (HTML Уроки)
