Ostatnio edytowany:
Komórka tabeli HTML
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
).