Autor publikacji
Virtual Patriot - Administrator

col

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu col

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

Dodatkowe artykuły związane z elementem col

brak

Informacje techniczne 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

zdolność fallback

nie dotyczy

składnia HTML

<col>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

table-column

Przypuszczalnie 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

Atrybut Lokalny

span

Przeznaczenie atrybutu span

Atrybut span wykorzystany wraz z elementem col pozwala nam określić informację o tym, jaka ilość kolumn tabeli HTML powinna zostać przypisana 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".