Ostatnio edytowany: Listopad 16 2017

Komórka tabeli HTML

Autor: Virtual Patriot

Oprócz wierszy każda tabela HTML zbudowana jest z komórek. Każdy wiersz tabeli HTML może posiadać swoje komórki. Każda komórka tabeli HTML reprezentowana jest między innymi przez jeden element td. Zawartość każdej komórki tabeli HTML może reprezentować interesującą nas treść, na przykład interesujący nas ciąg znaków.

Przykład:

<table>
  <tr>
    <td>czereśnia</td><!-- pierwsza komórka pierwszego wiersza -->
  </tr>
</table>

Rezultat:

czereśnia

Oczywiście, jeżeli zechcemy, nasz przykładowy wiersz tabeli HTML może składać się z większej liczby komórek, czyli z większej liczby elementów td.

Przykład:

<table>
  <tr>
    <td>czereśnia</td><!-- pierwsza komórka pierwszego wiersza -->
    <td>seler</td><!-- druga komórka pierwszego wiersza -->
    <td>sosna</td><!-- trzecia komórka pierwszego wiersza -->
    <td>róża</td><!-- czwarta komórka pierwszego wiersza -->
  </tr>
</table>

Rezultat:

czereśnia

seler

sosna

róża

Jeżeli zechcemy, aby nasza tabela HTML oraz jej poszczególne komórki posiadały domyślne obramowanie, wtedy możemy skorzystać z atrybutu border, który należy dodać do elementu table.

Przykład:

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

Rezultat:

czereśnia

seler

sosna

róża

Tabela HTML może składać się z większej liczby wierszy, czyli z większej liczby elementów tr, które dodatkowo mogą posiadać swoje komórki, czyli elementy td, lecz każdy wiersz tej samej tabeli HTML powinien posiadać taką samą liczbę komórek, dzięki czemu unikniemy dodatkowych problemów.

Przykład:

<table border>
  <tr>
    <td>czereśnia</td><!-- pierwsza komórka pierwszego wiersza -->
    <td>seler</td><!-- druga komórka pierwszego wiersza -->
    <td>sosna</td><!-- trzecia komórka pierwszego wiersza -->
    <td>róża</td><!-- czwarta komórka pierwszego wiersza -->
  </tr>

  <tr>
    <td>jabłko</td><!-- pierwsza komórka drugiego wiersza -->
    <td>marchew</td><!-- druga komórka drugiego wiersza -->
    <td>dąb</td><!-- trzecia komórka drugiego wiersza -->
    <td>tulipan</td><!-- czwarta komórka drugiego wiersza -->
  </tr>

  <tr>
    <td>gruszka</td><!-- pierwsza komórka trzeciego wiersza -->
    <td>rzodkiewka</td><!-- druga komórka trzeciego wiersza -->
    <td>świerk</td><!-- trzecia komórka trzeciego wiersza -->
    <td>słonecznik</td><!-- czwarta komórka trzeciego wiersza -->
  </tr>
</table>

Rezultat:

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

Od tej pory nasza przykładowa tabela HTML składa się z trzech wierszy (elementów tr) oraz z dwunastu komórek (elementów td). Ponadto każdy wiersz (element tr) naszej przykładowej tabeli HTML składa się z czterech komórek (elementów td).