ДомойНовостиФорумСтатьиКонтактыПортфолио
Таблицы в HTML

Автор: L-¤-D™
не оценено -

Таблицы в HTML


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

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

ABC
DEF

Код:
  1. <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 1Item 2Item 3
Item 4Item 5
Item 1Item 2Item 3
Item 4Item 5

Код:
  1. <TABLE border=1><TBODY><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></TBODY></TABLE><PRE><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></PRE>

ПРИМЕР С COLSPAN

Item 1Item 2
Item 3Item 4Item 5

Код:
  1. <PRE><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></PRE>

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

Head1Head2Head3
ABC
DEF

Код:
  1. <PRE><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></PRE>

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

Head1Head2
ABCD
EFGH

Код:
  1. <PRE><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></PRE>

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

Head1Head2
Head 3Head 4Head 5Head 6
ABCD
EFGH

Код:
  1. <PRE><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></PRE>

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

Head1Item 1Item 2Item 3
Head2Item 4Item 5Item 6
Head3Item 7Item 8Item 9

Код:
  1. <PRE><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></PRE>

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

Head1Item 1Item 2Item 3Item 4
Item 5Item 6Item 7Item 8
Head2Item 9Item 10Item 3Item 11

Код:
  1. <PRE><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></PRE>

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

Average
HeightWeight
GenderMales1.90.003
Females1.70.002

Код:
  1. <PRE><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></PRE>

ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN

A12
34
CD

Код:
  1. <PRE><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></PRE>

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

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

Item 1Item 2Item 3
Item 4Item 5

Код:
  1. <PRE><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></PRE>

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

Item 1Item 2
Item 3Item 4

Код:
  1. <PRE><TABLE BORDER=10><TR><TD>Item 1</TD><TD> Item 2</TD></TR><TR><TD>Item 3</TD><TD>Item 4</TD></TR></TABLE></PRE>

CELLPADDING И CELLSPACING

ABC
DEF

Код:
  1. <PRE><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></PRE>

ABC
DEF

Код:
  1. <PRE><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></PRE>

ABC
DEF

Код:
  1. <PRE><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></PRE>

ABC
DEF

Код:
  1. <PRE><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></PRE>

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

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

ЯнварьФевральМарт
This is cell 1Cell 2Another cell,
cell 3
Cell 4and now this
is cell 5		Cell 6

Код:
  1. <PRE><TABLE BORDER><TR><TH>Январь</TH><TH>Февраль</TH><TH>Март</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></PRE>

ALIGN=LEFT|RIGHT|CENTER

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

ЯнварьФевральМарт
all aligned centerCell 2Another cell,
cell 3
aligned rightaligned to centerdefault,
aligned left

Код:
  1. <PRE><TABLE BORDER><TR><TH>Январь</TH><TH>Февраль</TH><TH>Март</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></PRE>

VALIGN=TOP|BOTTOM|MIDDLE

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

ЯнварьФевральМарт
all aligned to topand now this
is cell 2		Cell 3
aligned to the topaligned to the bottomdefault alignment,
center

Код:
  1. <PRE><TABLE BORDER><TR><TH>Январь</TH><TH>Февраль</TH><TH>Март</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></PRE>

CAPTION=TOP|BOTTOM

Верхний заголовок
ЯнварьФевральМарт
This is cell 1Cell 2Another cell,
cell 3

Код:
  1. <PRE><TABLE BORDER><CAPTION ALIGN=top>A top CAPTION</CAPTION><TR><TH>Январь</TH><TH>Февраль</TH><TH>Март</TH></TR><TR><TD>This is cell 1</TD><TD>Cell 2</TD><TD>Another cell,<br> cell 3</TD></TR></TABLE></PRE>

Нижний заголовок
ЯнварьФевральМарт
This is cell 1Cell 2Another cell,
cell 3

Код:
  1. <PRE><TABLE BORDER><CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION><TR><TH>Январь</TH><TH>Февраль</TH><TH>Март</TH></TR><TR><TD>This is cell 1</TD><TD>Cell 2</TD><TD>Another cell,<br> cell 3</TD></TR></TABLE></PRE>

ВЛОЖЕННЫЕ ТАБЛИЦЫ: ТАБЛИЦА ABCD ВНУТРИ ТАБЛИЦЫ 123456

123
AB
CD
456

Код:
  1. <PRE><TABLE BORDER><TR><!-- ROW 1, TABLE 1 --><TD>1</TD><TD>2</TD><TD>3
  2. <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></PRE>

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

ШИРИНА 50%

Width=50%Width=50%
34

Код:
  1. <PRE><TABLE BORDER WIDTH="50%"><TR><TD>Width=50%</TD><TD>Width=50%</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE></PRE>

Item width affects cell size2
34

Код:
  1. <PRE><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></PRE>

WIDTH=100%This is item 2
34

Код:
  1. <PRE><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></PRE>

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

ABC
DEF

Код:
  1. <PRE><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></PRE>

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

Item 1Item 2
Item AItem B
Item 4

Код:
  1. <PRE><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></PRE>

HEIGHT=15%

HEIGHT=15%Item 2
34

Код:
  1. <PRE><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></PRE>

Перевод Степченко Евгения
Центр Информационных Технологий, НГТУ
Яндекс.Метрика
Счетчик тИЦ и PR
© 2006-2020 Создано 
бесплатный счетчик
Время генерации страницы:0.4493 сек.,0.0296 из этого заняли запросы.Запросов к БД:29.