Autor publikacji
Virtual Patriot - Administrator

Zasięg elementu "th"

Data publikacji
Ostatnio edytowano

Gdy przeglądarka internetowa widzi w naszym kodzie HTML elementy th, przeglądarka internetowa próbuje odgadnąć, które komórki tabeli HTML obejmowane są zasięgiem przez poszczególne elementy th występujące w naszym kodzie HTML.

Przykład: 

<table border>
  <tr>
    <th>owoce</th>
    <th>warzywa</th>
    <th>drzewa</th>
    <th>kwiaty</th>
  </tr>

  <tr>
    <td>czereśnia</td>
    <td>seler</td>
    <td>sosna</td>
    <td>róża</td>
  </tr>

  <tr>
    <td>jabłko</td>
    <td>marchew</td>
    <td>dąb</td>
    <td>tulipan</td>
  </tr>

  <tr>
    <td>gruszka</td>
    <td>rzodkiewka</td>
    <td>świerk</td>
    <td>słonecznik</td>
  </tr>
</table>

Rezultat:

owoce warzywa drzewa kwiaty
czereśnia seler sosna róża
jabłko marchew dąb tulipan
gruszka rzodkiewka świerk słonecznik

Przykładowo. My wiemy o tym, że występujący w naszym przykładowym kodzie HTML element th, którego zawartość reprezentuje treść w postaci ciągu znaków drzewa obejmuje swoim zasięgiem kolejne komórki w danej kolumnie tabeli HTML (w tym wypadku kolejne komórki trzeciej kolumny), czyli komórkę, której zawartość reprezentuje treść w postaci ciągu znaków sosna, komórkę, której zawartość reprezentuje treść w postaci ciągu znaków dąb oraz komórkę, której zawartość reprezentuje treść w postaci ciągu znaków świerk.

owoce warzywa drzewa kwiaty
czereśnia seler sosna róża
jabłko marchew dąb tulipan
gruszka rzodkiewka świerk słonecznik

Aby w tej sytuacji mieć pewność, że przeglądarka internetowa również będzie wiedziała, które komórki tabeli HTML obejmuje swoim zasięgiem wspomniany element th możemy dodać do wspomnianego elementu th atrybut scope wraz z wartością col.

Przykład: 

<table border>
  <tr>
    <th>owoce</th>
    <th>warzywa</th>
    <th scope="col">drzewa</th>
    <th>kwiaty</th>
  </tr>

  <tr>
    <td>czereśnia</td>
    <td>seler</td>
    <td>sosna</td>
    <td>róża</td>
  </tr>

  <tr>
    <td>jabłko</td>
    <td>marchew</td>
    <td>dąb</td>
    <td>tulipan</td>
  </tr>

  <tr>
    <td>gruszka</td>
    <td>rzodkiewka</td>
    <td>świerk</td>
    <td>słonecznik</td>
  </tr>
</table>

Treść reprezentowaną przez naszą dotychczasową przykładową tabelę HTML możemy przedstawić również w nieco inny sposób.

Przykład: 

<table border>
  <tr>
    <th>owoce</th>
    <td>czereśnia</td>
    <td>jabłko</td>
    <td>gruszka</td>
  </tr>

  <tr>
    <th>warzywa</th>
    <td>seler</td>
    <td>marchew</td>
    <td>rzodkiewka</td>
  </tr>

  <tr>
    <th>drzewa</th>
    <td>sosna</td>
    <td>dąb</td>
    <td>świerk</td>
  </tr>

  <tr>
    <th>kwiaty</th>
    <td>róża</td>
    <td>tulipan</td>
    <td>słonecznik</td>
  </tr>
</table>

Rezultat:

owoce czereśnia jabłko gruszka
warzywa seler marchew rzodkiewka
drzewa sosna dąb świerk
kwiaty róża tulipan słonecznik

Spoglądając na naszą nową przykładową tabelę HTML możemy dostrzec, że występujący w naszym przykładowym kodzie HTML element th, którego zawartość reprezentuje treść w postaci ciągu znaków drzewa obejmuje swoim zasięgiem kolejne komórki w danym wierszu tabeli HTML (w tym wypadku kolejne komórki trzeciego wiersza), czyli komórkę, której zawartość reprezentuje treść w postaci ciągu znaków sosna, komórkę, której zawartość reprezentuje treść w postaci ciągu znaków dąb oraz komórkę, której zawartość reprezentuje treść w postaci ciągu znaków świerk.

owoce czereśnia jabłko gruszka
warzywa seler marchew rzodkiewka
drzewa sosna dąb świerk
kwiaty róża tulipan słonecznik

Aby w tej sytuacji mieć pewność, że przeglądarka internetowa również będzie wiedziała, które komórki tabeli HTML obejmuje swoim zasięgiem wspomniany element th możemy dodać do wspomnianego elementu th atrybut scope wraz z wartością row.

Przykład: 

<table border>
  <tr>
    <th>owoce</th>
    <td>czereśnia</td>
    <td>jabłko</td>
    <td>gruszka</td>
  </tr>

  <tr>
    <th>warzywa</th>
    <td>seler</td>
    <td>marchew</td>
    <td>rzodkiewka</td>
  </tr>

  <tr>
    <th scope="row">drzewa</th>
    <td>sosna</td>
    <td>dąb</td>
    <td>świerk</td>
  </tr>

  <tr>
    <th>kwiaty</th>
    <td>róża</td>
    <td>tulipan</td>
    <td>słonecznik</td>
  </tr>
</table>