Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
<TABLE>...</TABLE>

Атрибут align

Left выравнивание таблицы по левому краю документа
Center выравнивание таблицы по центру документа
Right выравнивание таблицы по правому краю документа

Атрибут frame

void выравнивание таблицы по левому краю документа
above отображается только верхняя сторона рамки таблицы
below отображается только нижняя сторона рамки таблицы.
below отображается только нижняя сторона рамки таблицы.
hsides отображаются только верхняя и нижняя стороны рамки таблицы
vsides отображаются только левая и правая стороны рамки таблицы
lhs отображается только левая сторона рамки таблицы.
rhs отображается только правая сторона рамки таблицы.
box все четыре стороны рамки таблицы.
border все 4 стороны рамки.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Атрибут frame для таблиц</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="5" frame="box" width="200px">
  8.<caption>Атрибут frame="box"</caption>
  9.<TR> <TD>1 <TD>2 <TD>3
10.<TR> <TD>4 <TD>5 <TD>6
11.<TR> <TD>7 <TD>8 <TD>9
12.</TABLE>
13.
14.<TABLE border="5" frame="hsides" width="200px">
15.<caption>Атрибут frame="hsides"</caption>
16.<TR> <TD>1 <TD>2 <TD>3
17.<TR> <TD>4 <TD>5 <TD>6
18.<TR> <TD>7 <TD>8 <TD>9
19.</TABLE>
20.
21.<TABLE border="5" frame="vsides" width="200px">
22.<caption>Атрибут frame="hsides"</caption>
23.<TR> <TD>1 <TD>2 <TD>3
24.<TR> <TD>4 <TD>5 <TD>6
25.<TR> <TD>7 <TD>8 <TD>9
26.</TABLE>
27.
28.<TABLE border="5" frame="above" width="200px">
29.<caption>Атрибут frame="above"</caption>
30.<TR> <TD>1 <TD>2 <TD>3
31.<TR> <TD>4 <TD>5 <TD>6
32.<TR> <TD>7 <TD>8 <TD>9
33.</TABLE>
34.
35.<TABLE border="5" frame="below" width="200px">
36.<caption>Атрибут frame="below"</caption>
37.<TR> <TD>1 <TD>2 <TD>3
38.<TR> <TD>4 <TD>5 <TD>6
39.<TR> <TD>7 <TD>8 <TD>9
40.</TABLE>
41.
42.
43.<TABLE border="5" frame="void" width="200px">
44.<caption>Атрибут frame="void"</caption>
45.<TR> <TD>1 <TD>2 <TD>3
46.<TR> <TD>4 <TD>5 <TD>6
47.<TR> <TD>7 <TD>8 <TD>9
48.</TABLE>
49. </BODY>
50.</HTML>
51.
Атрибут frame для таблиц
Атрибут frame для таблиц

Атрибут rules

Допустимые значения: none|groups|rows|cols|all

none линии между ячейками таблицы отсутствуют.
groups линии будут отображены между группами строк (THEAD, TFOOT, TBODY) и группами столбцов (COLGROUP и COL).
rows линии будут отображены между строками
cols линии будут отображены между столбцами
all : линии будут отображены между столбцами и между строками

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Атрибут rules</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="5" rules="rows" width="200px">
  8.<caption>Атрибут rules="rows</caption>
  9.<TR> <TD>1 <TD>2 <TD>3
10.<TR> <TD>4 <TD>5 <TD>6
11.<TR> <TD>7 <TD>8 <TD>9
12.</TABLE>
13.
14.<TABLE border="5" rules="cols" width="200px">
15.<caption>Атрибут rules="cols"</caption>
16.<TR> <TD>1 <TD>2 <TD>3
17.<TR> <TD>4 <TD>5 <TD>6
18.<TR> <TD>7 <TD>8 <TD>9
19.</TABLE>
20.
21.<TABLE border="5" rules="all" width="200px">
22.<caption>Атрибут rules="all"</caption>
23.<TR> <TD>1 <TD>2 <TD>3
24.<TR> <TD>4 <TD>5 <TD>6
25.<TR> <TD>7 <TD>8 <TD>9
26.</TABLE>
27.
28.<TABLE border="5" rules="none" width="200px">
29.<caption>Атрибут rules="none"</caption>
30.<TR> <TD>1 <TD>2 <TD>3
31.<TR> <TD>4 <TD>5 <TD>6
32.<TR> <TD>7 <TD>8 <TD>9
33.</TABLE>
34.
35. </BODY>
36.</HTML>
37.
Атрибут rules
Атрибут rules

Хотя атрибут cols позволяет увеличить скорость загрузки таблицы, он не рекомендован стандартом HTML к использованию, вместо него необходимо использовать элементы группировки столбцов – COL и COLGROUP.

Направление в таблицах

Направление в таблицах осуществляется с помощью атрибута dir. Допустимо использовать два направления: левостороннее (ltr) и правостороннее (rtl).

При левостороннем направлении столбцы таблицы располагаются слева направо, при правостороннем наоборот – справа налево.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Группировка столбцов с обратным направлением</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="5" dir="RTL">
  8.<COLGROUP >
  9. <COL width="100" style="background-color:red;">
10. <COL width="100" style="background-color:blue;">
11. <COL width="100" style="background-color:green;">
12.<TR > <TD>1 <TD>2 <TD>3
13.<TR> <TD>4 <TD>5 <TD>6
14.<TR> <TD>7 <TD>8 <TD>9
15.</TABLE>
16.
17.
18. </BODY>
19.</HTML>
20.
Атрибут RTL
Атрибут RTL

Направление текста для индивидуальной ячейки задаётся атрибутом dir в соответствующей ячейке.

cellspacing промежуток между ячейками
cellpadding промежуток внутри ячейками

Слои таблицы и свойство прозрачности

Схема слоев таблицы

Пояснения к схеме:

  1. Самый нижний слой представляет блок создаваемый таблицей, он так же может быть прозрачным, для этого используйте свойство background:transparent;
  2. Следующий от низа слой содержит группы столбцов. Высота группы столбцов такая же, как у всей таблицы, однако, ширина группы столбцов может варьироваться и не должен соответствовать ширине всей таблицы.
  3. Следующий слой содержит сами столбцы, для этого слоя применимы все правила указанные во втором пункте.
  4. Далее идет слой группировки строк, его ширина такая же как у таблицы. Вместе все группы строк покрывают снизу донизу всю высоту таблицы.
  5. Следующий слой содержит строки таблицы.
  6. Хотя на рисунке и указано, что слой строк содержит столько же ячеек, сколько и слой, содержащий сами ячейки, но не все ячейки могут иметь содержимое и, как следствие, будут рассматриваться как пустые, то есть содержимое предыдущих слоёв будет видно через пустые ячейки.


Доступ и установка с jQuery

  • Получить коллекцию элементов TABLE: val = $("TABLE");
  • Получить класс элементаTABLE: val = $("TABLE").attr("class");
  • Установить несколько CSS свойств HTML элементу TABLE: $("TABLE").css({"...":"..."});
  • Установить единичное CSS свойство HTML элементу TABLE: $("TABLE").css("...","...");
  • Как использовать jQuery для HTML, - читайте статью "jQuery и HTML для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org