# Powiązanie komórki tabeli HTML z elementem "th"

Za pomocą atrybutu headers możemy powiązać interesującą nas komórkę tabeli HTML (element `td` lub element `th`) z interesującym nas elementem `th`. Wspomniana metoda może okazać się przydatna w niektórych sytuacjach.

Przykład:

```html
<table border>
  <caption>Grupowanie Roślin Świata Według Koloru</caption>

  <thead>
    <tr>
      <th>czerwone</th>
      <th>rośliny świata</th>
      <th>zielone</th>
    </tr>
  </thead>

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

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

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FhmRQnBPIl7P1TvfjMICp%2Fimage.png?alt=media&#x26;token=f8ada5e7-7ef7-4a97-af5b-5a2bfb2bfb6d" alt=""><figcaption></figcaption></figure>

Widząc nasz przykładowy kod HTML przeglądarka internetowa może dojść do wniosku, że element `th`, którego zawartość reprezentuje treść w postaci ciągu znaków `owoce` tyczy się tylko nagłówka, którego zawartość reprezentuje treść w postaci ciągu znaków `rośliny świata` (ponieważ oba wspomniane elementy HTML znajdują się w tej samej kolumnie tabeli HTML).

Jednak w tym wypadku wspomniany element `th` jest w pewnym sensie powiązany również z nagłówkiem, którego zawartość reprezentuje treść w postaci ciągu znaków `czerwone` (ponieważ w kolumnie, której nagłówkiem jest ciąg znaków `czerwone` występuje nazwa czerwonego owocu) oraz z nagłówkiem, którego zawartość reprezentuje treść w postaci ciągu znaków `zielone` (ponieważ w kolumnie, której nagłówkiem jest ciąg znaków `zielone` występuje nazwa zielonego owocu).

Za pomocą atrybutu `headers` możemy podpowiedzieć przeglądarce internetowej, z którymi elementami `th` z naszego założenia powinien być powiązany interesujący nas element `th`, w tym wypadku element `th`, którego zawartość reprezentuje treść w postaci ciągu znaków `owoce`.

Wartością atrybutu `headers` powinny być oddzielone od siebie przynajmniej jednym znakiem spacji wartości atrybutów `id` poszczególnych elementów `th`, z którymi to elementami `th` chcemy powiązać interesującą nas komórkę tabeli HTML, czyli w tym wypadku element `th`, którego zawartość reprezentuje treść w postaci ciągu znaków `owoce`.

Przykład:

```html
<table border>
  <caption>Grupowanie Roślin Świata Według Koloru</caption>

  <thead>
    <tr>
      <th id="red">czerwone</th>
      <th id="all">rośliny świata</th>
      <th id="green">zielone</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>truskawka</td>
      <th headers="red all green">owoce</th>
      <td>kiwi</td>
    </tr>
  </tbody>

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