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:

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

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:

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