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