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



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

Атрибут span имеет следующее значение

  1. Если он отсутствует, то элемент COL будет охватывать только один столбец;
  2. Если значение атрибута больше 0 то, то элемент COL будет охватывать несколько столбцов в соответствие со значением данного атрибута;
  3. Если значение атрибута равно 0 то, то элемент COL будет охватывать все столбцы таблицы.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Атрибут span для элемента COL</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="border">
  8.<COLGROUP>
  9.<COL span="3" style="background:#cadceb;border-top:5px solid grey;">
10.<TR><TD>1<TD>2<TD>3<TD>4
11.<TR><TD>5<TD>6TD>7<TD>8
12.<TR><TD>9<TD>10<TD>11<TD>12
13.</TABLE>
14.</BODY>
15.</HTML>
16.
Атрибут span для элемента COL
Атрибут span для элемента COL

Если значение ширины (width) для данного элемента будет указано одновременно с атрибутом span, то ширина не будет установлена для всех элементов охваченных атрибутом span, ширина будет установлена для каждой ячейки в отдельности:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Атрибут span для элемента COL</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="border">
  8.<COLGROUP>
  9.<COL width="100px" span="3" style="background:#cadceb;border-top:5px solid grey;">
10.<TR><TD>Lettuce<TD>Lettuce<TD>Lettuce<TD>Lettuce
11.<TR><TD>Silver carrots <TD>Silver carrots<TD>Silver carrots<TD>Silver carrots
12.<TR><TD>Golden turnips <TD>Golden turnips<TD>Golden turnips<TD>Golden turnips
13.</TABLE>
14. </BODY>
15.</HTML>
16.
17.
Атрибут span для элемента COL
Атрибут span для элемента COL

В следующем примере присутствуют две группы столбцов, первая содержит три столбца, а вторая два столбца. При этом горизонтальное пространство между столбцам таблицы должно будет распределиться в следующем порядке: сперва браузер выдели 100 пикселей под первый столбец, после этого выделит минимальную ширину для второго столбца, после этого остальное пространство будет распределено на 6 равных частей (width = 2+1+3). Третий столбец получит две части, четвертый одну, а третий три части.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3.<HEAD>
  4. <TITLE>Пример использования элементов COLGROUP и COL</TITLE>
  5.</HEAD>
  6.<BODY>
  7.<TABLE border="border" >
  8.<COLGROUP style="background:#cadceb;border-top:5px solid grey;">
  9.<col width="100"><col width="1*"><col width="1*">
10.<TR><TD>Lettuce<TD><TD><TD>
11.<TR><TD>Silver carrots <TD>.50<TD>L<TD>
12.<TR><TD>Golden turnips <TD>0.30<TD>L<TD>
13.</TABLE>
14. </BODY>
15.</HTML>
16.
Пример использования элементов COLGROUP и COL
Пример использования элементов COLGROUP и COL


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

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