Autor publikacji
Virtual Patriot - Administrator

colgroup

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu colgroup

Element colgroup reprezentuje jedno odwołanie lub jedną grupę odwołań do określonej liczby kolumn danej tabeli HTML.

Dodatkowe artykuły związane z elementem colgroup

brak

Informacje techniczne o elemencie colgroup

kategoria ogólna

brak

kontekst zewnętrzny

jako element dziecko elementu table, lecz po ewentualnym elemencie caption danego elementu table oraz przed ewentualnymi elementami: thead, tbody, tfoot, tr

Przykładowy Kod HTML

<table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <colgroup span="2" class="styl-1"></colgroup>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem zewnętrznym przykładowego elementu "colgroup" jest element "table", dla którego wspomniany element "colgroup" jest elementem dzieckiem. Ponadto wspomniany element "colgroup" występuje po elemencie "caption", przed elementem "thead", przed elementem "tbody" oraz przed elementem "tfoot", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "table", jest prawidłowym kontekstem zewnętrznym dla elementu "colgroup".

kontekst wewnętrzny

  • brak, lecz tylko wtedy gdy dany element colgroup posiada atrybut span

    Przykładowy Kod HTML

    <table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <colgroup span="2" class="styl-1"></colgroup>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

    Przykładowy element "colgroup" nie posiada kontekstu wewnętrznego, ponieważ wspomniany element "colgroup" posiada atrybut "span", dlatego w tej sytuacji wspomniany brak kontekstu wewnętrznego jest prawidłowym kontekstem wewnętrznym dla elementu "colgroup".

  • zero lub więcej elementów col, jak również zero lub więcej elementów template, lecz tylko wtedy gdy dany element colgroup nie posiada atrybutu span

    Przykładowy Kod HTML

    <table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <colgroup>
    <col class="styl-1">
    <col class="styl-2">
  </colgroup>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

    Kontekstem wewnętrznym przykładowego elementu "colgroup" są wyłącznie elementy "col". Ponadto wspomniany element "colgroup" nie posiada atrybutu "span", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "col" oraz element "col", jest prawidłowym kontekstem wewnętrznym dla elementu "colgroup".

    Przykładowy Kod HTML

    <table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <colgroup>
    <col class="styl-1">
    <col class="styl-2">

    <template id="szablon-1">
      <col span="2" class="styl-3">
    </template>
  </colgroup>

  <script src="skrypt-01.js"></script>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

    Kontekstem wewnętrznym przykładowego elementu "colgroup" są wyłącznie elementy "col" oraz element "template". Ponadto wspomniany element "colgroup" nie posiada atrybutu "span", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "col", element "col" oraz element "template", jest prawidłowym kontekstem wewnętrznym dla elementu "colgroup".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<colgroup> ... </colgroup>

pominięcie tagu na początku

tag może zostać pominięty, lecz tylko wtedy gdy pierwszą rzeczą, która znajduje się w kontekście wewnętrznym danego elementu colgroup jest element col oraz gdy bezpośrednio przed danym elementem colgroup nie występuje inny element colgroup, którego tag na końcu został pominięty, ponadto tag nie może zostać pominięty, jeżeli dany element colgroup z naszego założenia ma nie zawierać w swoim kontekście wewnętrznym niczego

pominięcie tagu na końcu

tag może zostać pominięty, lecz tylko wtedy gdy bezpośrednio po danym elemencie colgroup nie występuje ciąg znaków w formie białego znaku lub w formie komentarza języka HTML

CSS display

table-column-group

Przypuszczalnie domyślne reguły CSS elementu colgroup

colgroup {
  display:table-column-group;
}

Interpretacja elementu colgroup

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu colgroup

Atrybut Lokalny

span

Przeznaczenie atrybutu span

Atrybut span wykorzystany wraz z elementem colgroup pozwala nam określić informację o tym, jaka ilość kolumn tabeli HTML powinna zostać przypisana do danego elementu colgroup.

Atrybut "span" ma sens tylko wtedy gdy dany element "colgroup" nie posiada żadnych elementów dzieci.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu span

liczba

Należy podać liczbę całkowitą większą od zera.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <table border="1">
      <caption>Owoce Świata</caption>

      <colgroup span="2" style="background-color:orange;"></colgroup>
      <colgroup span="1" style="background-color:yellow;"></colgroup>

      <thead>
        <tr>
          <th>A - I</th>
          <th>J - R</th>
          <th>S - Z</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>ananas</td>
          <td>jabłko</td>
          <td>truskawka</td>
        </tr>

        <tr>
          <td>banan</td>
          <td>kokos</td>
          <td>winogrono</td>
        </tr>

        <tr>
          <td>cytryna</td>
          <td>malina</td>
          <td>wiśnia</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Owoce Świata
A - I J - R S - Z
ananas jabłko truskawka
banan kokos winogrono
cytryna malina wiśnia

Dwie kolumny tabeli HTML zostały przypisane do przykładowego elementu "colgroup" posiadającego atrybut "style" o wartości "background-color:orange;", ponieważ do wspomnianego elementu "colgroup" został dodany atrybut "span" wraz z wartością "2".