Вы здесь: Home *Сайтостроение* HTML, CSS Таблицы html в примерах
Все ленты — последние статьи
Главная
ИТ — специалист
Программы

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

Подробности
Категория: HTML, CSS

2001 г

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

Перевод Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Центр Информационных Технологий, НГТУ

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

ОБЫЧНАЯ ТАБЛИЦА 3X2

A B C
D E F 
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ДВА ПРИМЕРА С ROWSPAN

 

Item 1 Item 2 Item 3
Item 4 Item 5 
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

ПРИМЕР С COLSPAN

Item 1 Item 2
Item 3 Item 4 Item 5 
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<TH>)

Head1Head2Head3
A B C
D E F 
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ

Head1Head2
A B C D
E F G H 
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN

Head1Head2
Head 3Head 4Head 5Head 6
A B C D
E F G H 
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ

Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9 
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, 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 
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>

ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ

   Average
  HeightWeight
GenderMales 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 
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>

ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ

ТАБЛИЦА БЕЗ РАМКИ

Item 1 Item 2 Item 3
Item 4 Item 5 
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10

Item 1 Item 2
Item 3 Item 4 
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>

CELLPADDING И CELLSPACING

A B C
D E F 
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F 
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F 
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F 
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ И ПОДТАБЛИЦЫ

ДЕМОНСТРАЦИЯ MНОЖЕСТВЕННЫХ СТРОК В ТАБЛИЦЫ СТРОК В ТАБЛИЦЕ

JanuaryFebruaryMarch
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

может применяться к отдельным ячейкам или всей строке

JanuaryFebruaryMarch
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

может применяться к отдельным ячейкам или всей строке

JanuaryFebruaryMarch
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

Верхний заголовок
JanuaryFebruaryMarch
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>
Нижний заголовок
JanuaryFebruaryMarch
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 
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>

ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ

ШИРИНА 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 
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>

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

Item 1 Item 2
Item A Item B
Item 4 
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>

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>

 

torrent — торрент
Позитив, Юмор
Информационная безопасность. Хакер
Новости
android, смартфоны
Видео материал

All Rights Reserved © 2014–
Krayny.ru Россия, г. Краснодар (Russia, Krasnodar)