Ostatnio edytowany:

colgroup

Autor: Virtual Patriot

Przeznaczenie elementu colgroup

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

Dodatkowe techniczne informacje o elemencie colgroup

kategoria ogólna
  • brak
kontekst zewnętrzny
  • jako element dziecko elementu table (po ewentualnym elemencie caption, lecz 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" znajduje się po elemencie "caption" oraz przed elementem "thead", elementem "tbody" oraz 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
  • gdy dany element colgroup posiada atrybut span oznacza to brak kontekstu wewnętrznego

    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".

  • gdy dany element colgroup nie posiada atrybutu span kontekstem wewnętrznym mogą być elementy col, jak również ewentualnie elementy template

    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
składnia HTML
  • <colgroup> ... </colgroup>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • tag może zostać pominięty, lecz tylko jeżeli 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

Dodatkowe 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

span

Przeznaczenie atrybutu span

Atrybut span wykorzystany wraz z elementem colgroup określa ilość kolumn tabeli HTML, które powinny zostać przypisane do danego elementu colgroup.

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".