Ostatnio edytowany:

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

Autor: Virtual Patriot

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:

Grupowanie Roślin Świata Według Koloru
czerwone rośliny świata zielone
truskawka owoce kiwi
pomidor warzywa ogórek

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>