f-program - все для настоящего программиста

- C, C++

- CGI

- CSS

- Data Bases

- HTML

- Java

- Java Script

- PHP

- SQL

- SSI

- Web - дизайн

- XML

- XP (eXtremal Programming)

- Расскрутка сайта

f-program :: Html

Таблицы в примерах

Перевод Степченко Евгения
Центр Информационных Технологий, НГТУ

Этот документ содержит примеры таблиц. Он охватывает большинство новых тэгов в таблицах. Впрочем он не обязательно показывает некоторые действительно творческие возможности, доступные в таблицах.

ОБЫЧНАЯ ТАБЛИЦА 3X2 A B C
D E F

ДВА ПРИМЕРА С ROWSPAN Item 1 Item 2 Item 3
Item 4 Item 5

Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7

ПРИМЕР С COLSPAN Item 1 Item 2
Item 3 Item 4 Item 5

ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>) Head1 Head2 Head3
A B C
D E F

ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ Head1 Head2
A B C D
E F G H

ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPAN Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11

ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002

<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH></TD>
</TR>
<TR> <TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>

ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN A 1 2
3 4
C D

ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ
ТАБЛИЦА БЕЗ РАМКИ Item 1 Item 2 Item 3
Item 4 Item 5

ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10 Item 1 Item 2
Item 3 Item 4

CELLPADDING И CELLSPACING A B C
D E F

A B C
D E F

A B C
D E F

A B C
D E F

ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ И ПОДТАБЛИЦЫ
ДЕМОНСТРАЦИЯ MНОЖЕСТВЕННЫХ СТРОК В ТАБЛИЦЫ СТРОК В ТАБЛИЦЕ January February March
This is cell 1 Cell 2 Another cell,
cell 3
Cell 4 and now this
is cell 5 Cell 6

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER

может применяться к отдельным ячейкам или всей строке January February March
all aligned center Cell 2 Another cell,
cell 3
aligned right aligned to center default,
aligned left

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE

может применяться к отдельным ячейкам или всей строке January February March
all aligned to top and now this
is cell 2 Cell 3
aligned to the top aligned to the bottom default alignment,
center

<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR VALIGN=top>
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>aligned to the top</TD>
<TD VALIGN=bottom>aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>

CAPTION=TOP|BOTTOM Верхний заголовок January February March
This is cell 1 Cell 2 Another cell,
cell 3

<TABLE BORDER>
<CAPTION ALIGN=top>A top CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

Нижний заголовок January February March
This is cell 1 Cell 2 Another cell,
cell 3

<TABLE BORDER>
<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>

ВЛОЖЕННЫЕ ТАБЛИЦЫ: ТАБЛИЦА ABCD ВНУТРИ ТАБЛИЦЫ 123456 1 2 3 A B
C D

4 5 6

ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ
ШИРИНА 50% Width=50% Width=50%
3 4

<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Item width affects cell size 2
3 4

<TABLE BORDER WIDTH="50%">
<TR><TD>Item width affects cell size</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

WIDTH=100% This is item 2
3 4

<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

ЦЕНТРИРОВАНИЕ ТАБЛИЦЫ НА СТРАНИЦЕ

A B C
D E F

ШИРИНА ТАБЛИЦЫ И ВЛОЖЕННЫЕ ТАБЛИЦЫ Item 1 Item 2
Item A Item B
Item 4

HEIGHT=15% HEIGHT=15% Item 2
3 4

<TABLE BORDER WIDTH="50%" HEIGHT="15%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>

Design by FiLLiN

Используются технологии uCoz