Ostatnio edytowany:

th

Autor: Virtual Patriot

Przeznaczenie elementu th

Element th reprezentuje jedną komórkę tabeli HTML pełniącą rolę nagłówka wiersza lub kolumny.

Dodatkowe techniczne informacje o elemencie th

kategoria ogólna
  • brak
kontekst zewnętrzny
  • jako element dziecko elementu tr

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <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ładowych elementów "th" są elementy "tr", dla których wspomniane elementy "th" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "tr", element "tr", element "tr" oraz element "tr", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "th".

kontekst wewnętrzny
  • zawartość opływająca, lecz nie następujące elementy HTML jako elementy potomkowie: header, footer, elementy HTML należące do kategorii nagłówek zawartości, elementy HTML należące do kategorii sekcja zawartości

    Przykładowy Kod HTML

    <table>
      <caption>Ilość przedmiotów w magazynie</caption>
    
      <thead>
        <tr>
          <th><b>przedmiot</b></th>
          <th><b>ilość</b></th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <th><b>szafa</b></th>
          <td>10</td>
        </tr>
    
        <tr>
          <th><b>stół</b></th>
          <td>5</td>
        </tr>
      </tbody>
    
      <tfoot>
        <tr>
          <th><b>suma</b></th>
          <td>15</td>
        </tr>
      </tfoot>
    </table>

    Kontekstem wewnętrznym przykładowych elementów "th" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które nie są zakazanym kontekstem wewnętrznym elementu "th", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "b", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "th".

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <th> ... </th>
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 th występuje element td lub element th lub jeżeli bezpośrednio po danym elemencie th nie występuje żadna inna zawartość, która z założenia miałaby należeć do zawartości elementu rodzica danego elementu th
CSS display
  • table-cell

Dodatkowe domyślne reguły CSS elementu th

th {
  display:table-cell;
  text-align:center;
  font-weight:bold;
  vertical-align:inherit;
  padding:1px;
}

table[border] th {
  border-width:1px;
  border-style:inset;
}

Interpretacja elementu th

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Safari

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Opera

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Internet Explorer

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Edge

tak

Nie interpretuje wartości 0 atrybutu rowspan.

Opis atrybutów elementu th

abbr

Przeznaczenie atrybutu abbr

Atrybut abbr wykorzystany wraz z elementem th określa alternatywną (zamienną) treść w postaci tekstu dla treści reprezentowanej przez zawartość danego elementu th.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu abbr

tekst alternatywny

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu alternatywnego.

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>

      <thead>
        <tr>
          <th abbr="zakres od A do I">A - I</th>
          <th abbr="zakres od J do R">J - R</th>
          <th abbr="zakres od S do Z">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

Ponieważ do przykładowego elementu "th" został dodany atrybut "abbr" wraz z wartością "zakres od J do R" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "J - R" zawiera dodatkową treść alternatywną w postaci wspomnianego ciągu znaków "zakres od J do R", który to ciąg znaków "zakres od J do R" może zostać wykorzystany przez jeden z mechanizmów przeglądarki internetowej służący do czytania treści stron internetowych.

colspan

Przeznaczenie atrybutu colspan

Atrybut colspan wykorzystany wraz z elementem th określa liczbę kolumn danej tabeli HTML, których komórki mają ulec poziomemu scaleniu względem danego elementu th.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu colspan

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>Rośliny Świata</caption>

      <tbody>
        <tr>
          <th>zakres</th>
          <th colspan="3">owoce</th>
        </tr>

        <tr>
          <th>A - I</th>
          <td>ananas</td>
          <td>banan</td>
          <td>cytryna</td>
        </tr>

        <tr>
          <th>J - R</th>
          <td>jabłko</td>
          <td>kokos</td>
          <td>malina</td>
        </tr>

        <tr>
          <th>S - Z</th>
          <td>truskawka</td>
          <td>winogrono</td>
          <td>wiśnia</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <th>zakres</th>
          <th colspan="3">warzywa</th>
        </tr>

        <tr>
          <th>A - I</th>
          <td>bakłażan</td>
          <td>cebula</td>
          <td>fasola</td>
        </tr>

        <tr>
          <th>J - R</th>
          <td>kalafior</td>
          <td>marchew</td>
          <td>ogórek</td>
        </tr>

        <tr>
          <th>S - Z</th>
          <td>rzodkiew</td>
          <td>sałata</td>
          <td>szpinak</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
zakres owoce
A - I ananas banan cytryna
J - R jabłko kokos malina
S - Z truskawka winogrono wiśnia
zakres warzywa
A - I bakłażan cebula fasola
J - R kalafior marchew ogórek
S - Z rzodkiew sałata szpinak

Przykładowy element "th" został scalony względem komórek trzech kolumn tabeli HTML, ponieważ do wspomnianego elementu "th" został dodany atrybut "colspan" wraz z wartością "3".

headers

Przeznaczenie atrybutu headers

Atrybut headers wykorzystany wraz z elementem th określa, z którym elementem th powinien zostać powiązany dany element th.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu headers

th id

Należy podać wartość atrybutu id interesującego nas elementu th.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Grupowanie roślin według koloru</caption>

      <thead>
        <tr>
          <th id="czerwone">czerwone</th>
          <th id="globalne">rośliny świata</th>
          <th id="zielone">zielone</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>truskawka</td>
          <th headers="czerwone globalne zielone">owoce</th>
          <td>kiwi</td>
        </tr>

        <tr>
          <td>pomidor</td>
          <th headers="czerwone globalne zielone">warzywa</th>
          <td>ogórek</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Grupowanie roślin według koloru
czerwone rośliny świata zielone
truskawka owoce kiwi
pomidor warzywa ogórek

Ponieważ do przykładowego elementu "th" został dodany atrybut "headers" wraz z wartością "czerwone globalne zielone" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "owoce" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "th" został powiązany z elementem "th" posiadającym atrybut "id" o wartości "czerwone", z elementem "th" posiadającym atrybut "id" o wartości "globalne" oraz z elementem "th" posiadającym atrybut "id" o wartości "zielone".

Możemy podać kilka wartości oddzielonych od siebie przynajmniej jednym znakiem spacji.

rowspan

Przeznaczenie atrybutu rowspan

Atrybut rowspan wykorzystany wraz z elementem th określa liczbę wierszy danej tabeli HTML, których komórki mają ulec pionowemu scaleniu względem danego elementu th.

Wartość domyślna

1 (w każdej sytuacji)

Wartości atrybutu rowspan

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>Rośliny Świata</caption>

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

      <tbody>
        <tr>
          <th rowspan="3">owoce</th>
          <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>

      <tbody>
        <tr>
          <th rowspan="3">warzywa</th>
          <td>bakłażan</td>
          <td>kalafior</td>
          <td>rzodkiew</td>
        </tr>

        <tr>
          <td>cebula</td>
          <td>marchew</td>
          <td>sałata</td>
        </tr>

        <tr>
          <td>fasola</td>
          <td>ogórek</td>
          <td>szpinak</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
grupy A - I J - R S - Z
owoce ananas jabłko truskawka
banan kokos winogrono
cytryna malina wiśnia
warzywa bakłażan kalafior rzodkiew
cebula marchew sałata
fasola ogórek szpinak

Przykładowy element "th" został scalony względem komórek trzech wierszy tabeli HTML, ponieważ do wspomnianego elementu "th" został dodany atrybut "rowspan" wraz z wartością "3".

0

Wartość 0 oznacza, że scaleniu względem danego elementu th mają ulec komórki wszystkich wierszy (znajdujących się pod wspomnianym elementem th oraz należących do tej samej grupy wierszy).

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Rośliny Świata</caption>

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

      <tbody>
        <tr>
          <th rowspan="0">owoce</th>
          <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>

      <tbody>
        <tr>
          <th rowspan="3">warzywa</th>
          <td>bakłażan</td>
          <td>kalafior</td>
          <td>rzodkiew</td>
        </tr>

        <tr>
          <td>cebula</td>
          <td>marchew</td>
          <td>sałata</td>
        </tr>

        <tr>
          <td>fasola</td>
          <td>ogórek</td>
          <td>szpinak</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
grupy A - I J - R S - Z
owoce ananas jabłko truskawka
banan kokos winogrono
cytryna malina wiśnia
warzywa bakłażan kalafior rzodkiew
cebula marchew sałata
fasola ogórek szpinak

Przykładowy element "th" został scalony względem komórek wszystkich wierszy tabeli HTML znajdujących się w tym samym elemencie "tbody", co wspomniany element "th" oraz znajdujących się pod wspomnianym elementem "th", ponieważ do wspomnianego elementu "th" został dodany atrybut "rowspan" wraz z wartością "0".

scope

Przeznaczenie atrybutu scope

Atrybut scope wykorzystany wraz z elementem th określa zasięg danego elementu th na kolejne wiersze lub kolejne kolumny tabeli HTML, do której należy wspomniany element th.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu scope

row

Wartość row oznacza zasięg na kolejne komórki w danym wierszu.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Rośliny Świata</caption>

      <thead>
        <tr>
          <th>typy</th>
          <th>czerwone</th>
          <th>zielone</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th scope="row">owoce</th>
          <td>truskawka</td>
          <td>kiwi</td>
        </tr>

        <tr>
          <th scope="row">warzywa</th>
          <td>pomidor</td>
          <td>ogórek</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
typy czerwone zielone
owoce truskawka kiwi
warzywa pomidor ogórek

Ponieważ do przykładowego elementu "th" został dodany atrybut "scope" wraz z wartością "row" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "owoce" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "th" swoim zasięgiem obejmuje kolejne komórki w danym wierszu tabeli HTML, czyli komórkę, której zawartością jest ciąg znaków "truskawka" oraz komórkę, której zawartością jest ciąg znaków "kiwi".

wzorzec graficzny - zasięg row

Na grafice - zasięg na kolejne komórki w danym wierszu w praktyce.
col

Wartość col oznacza zasięg na kolejne komórki w danej kolumnie.

Przykładowy Kod HTML

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

    <table border="1">
      <caption>Rośliny Świata</caption>

      <thead>
        <tr>
          <th>typy</th>
          <th scope="col">czerwone</th>
          <th scope="col">zielone</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>owoce</th>
          <td>truskawka</td>
          <td>kiwi</td>
        </tr>

        <tr>
          <th>warzywa</th>
          <td>pomidor</td>
          <td>ogórek</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Rośliny Świata
typy czerwone zielone
owoce truskawka kiwi
warzywa pomidor ogórek

Ponieważ do przykładowego elementu "th" został dodany atrybut "scope" wraz z wartością "col" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "czerwone" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "th" swoim zasięgiem obejmuje kolejne komórki w danej kolumnie tabeli HTML, czyli komórkę, której zawartością jest ciąg znaków "truskawka" oraz komórkę, której zawartością jest ciąg znaków "pomidor".

wzorzec graficzny - zasięg col

Na grafice - zasięg na kolejne komórki w danej kolumnie w praktyce.
rowgroup

Wartość rowgroup oznacza zasięg na kolejne komórki w danej grupie wierszy.

Przykładowy Kod HTML

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

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

      <thead>
        <tr>
          <th>typy</th>
          <th>czerwone</th>
          <th>zielone</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th scope="rowgroup">jadalne</th>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <th>owoce</th>
          <td>truskawka</td>
          <td>kiwi</td>
        </tr>

        <tr>
          <th>warzywa</th>
          <td>pomidor</td>
          <td>ogórek</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <th scope="rowgroup">niejadalne</th>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <th>minerały</th>
          <td>rubin</td>
          <td>chloryt</td>
        </tr>

        <tr>
          <th>różne</th>
          <td>cegła</td>
          <td>farba</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Przedmioty Świata
typy czerwone zielone
jadalne
owoce truskawka kiwi
warzywa pomidor ogórek
niejadalne
minerały rubin chloryt
różne cegła farba

Ponieważ do przykładowego elementu "th" został dodany atrybut "scope" wraz z wartością "rowgroup" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "jadalne" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "th" swoim zasięgiem obejmuje kolejne komórki w danej grupie wierszy tabeli HTML, czyli pierwszą komórkę, której zawartość jest zawartością pustą, drugą komórkę, której zawartość jest zawartością pustą, komórkę, której zawartością jest ciąg znaków "owoce", komórkę, której zawartością jest ciąg znaków "truskawka", komórkę, której zawartością jest ciąg znaków "kiwi", komórkę, której zawartością jest ciąg znaków "warzywa", komórkę, której zawartością jest ciąg znaków "pomidor" oraz komórkę, której zawartością jest ciąg znaków "ogórek".

wzorzec graficzny - zasięg rowgroup

Na grafice - zasięg na kolejne komórki w danej grupie wierszy w praktyce.
colgroup

Wartość colgroup oznacza zasięg na kolejne komórki w danej grupie kolumn.

Przykładowy Kod HTML

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

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

      <thead>
        <tr>
          <th>typy</th>
          <th>czerwone</th>
          <th>zielone</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th scope="colgroup">jadalne</th>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <th>owoce</th>
          <td>truskawka</td>
          <td>kiwi</td>
        </tr>

        <tr>
          <th>warzywa</th>
          <td>pomidor</td>
          <td>ogórek</td>
        </tr>
      </tbody>

      <tbody>
        <tr>
          <th scope="colgroup">niejadalne</th>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <th>minerały</th>
          <td>rubin</td>
          <td>chloryt</td>
        </tr>

        <tr>
          <th>różne</th>
          <td>cegła</td>
          <td>farba</td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Rezultat

Przedmioty Świata
typy czerwone zielone
jadalne
owoce truskawka kiwi
warzywa pomidor ogórek
niejadalne
minerały rubin chloryt
różne cegła farba

Ponieważ do przykładowego elementu "th" został dodany atrybut "scope" wraz z wartością "colgroup" wspomniany element "th", którego zawartość reprezentuje treść w postaci ciągu znaków "jadalne" zawiera dodatkową informację dla przeglądarki internetowej o tym, że wspomniany element "th" swoim zasięgiem obejmuje kolejne komórki w danej grupie kolumn tabeli HTML, czyli komórkę, której zawartością jest ciąg znaków "owoce", komórkę, której zawartością jest ciąg znaków "warzywa", pierwszą komórkę, której zawartość jest zawartością pustą, komórkę, której zawartością jest ciąg znaków "truskawka", komórkę, której zawartością jest ciąg znaków "pomidor", drugą komórkę, której zawartość jest zawartością pustą, komórkę, której zawartością jest ciąg znaków "kiwi" oraz komórkę, której zawartością jest ciąg znaków "ogórek".

wzorzec graficzny - zasięg colgroup

Na grafice - zasięg na kolejne komórki w danej grupie kolumn w praktyce.