# Zasięg elementu "th"

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:

```html
<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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FbxxUlCvqNV5LzmJr7vsf%2Fimage.png?alt=media&#x26;token=f0b8e3ba-226b-4851-a9ac-9ed7010cb8c9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F3COobOn0KpyqzLzJ3dOa%2Fimage.png?alt=media&#x26;token=96268cb2-9725-479f-8db3-d94140379692" alt=""><figcaption></figcaption></figure>

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:

```html
<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:

```html
<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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FnSeMO3jXxR0ul8DeinmW%2Fimage.png?alt=media&#x26;token=73e8db48-8dc0-4621-829f-785249ca8fcb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FFJ8X8us392ZGJAneSWmG%2Fimage.png?alt=media&#x26;token=f160324a-93fc-4863-ae85-b9715b4a8770" alt=""><figcaption></figcaption></figure>

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:

```html
<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>
```
