Ostatnio edytowany:

col

Autor: Virtual Patriot

Przeznaczenie elementu col

Element col reprezentuje jedno odwołanie do określonej liczby kolumn tabeli HTML.

Dodatkowe techniczne informacje o elemencie col

kategoria ogólna
  • brak
kontekst zewnętrzny
  • jako element dziecko elementu colgroup, który nie posiada atrybutu span

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <colgroup>
        <col 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 "col" jest element "colgroup", dla którego wspomniany element "col" jest elementem dzieckiem. Ponadto wspomniany element "colgroup" nie posiada atrybutu "span", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "colgroup", jest prawidłowym kontekstem zewnętrznym dla elementu "col".

kontekst wewnętrzny
  • brak
wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <col>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • zawsze
CSS display
  • table-column

Dodatkowe domyślne reguły CSS elementu col

col {
  display:table-column;
}

Interpretacja elementu col

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu col

span

Przeznaczenie atrybutu span

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

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>
        <col span="1" style="background-color:orange;">
        <col span="2" 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 "col" posiadającego atrybut "style" o wartości "background-color:yellow;", ponieważ do wspomnianego elementu "col" został dodany atrybut "span" wraz z wartością "2".