Tabele w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Tabela w HTML służy do prezentowania danych w układzie wierszy i kolumn. Podstawowe elementy tabeli to:

  • <table> – tworzy tabelę,
  • <tr> – tworzy wiersz tabeli,
  • <td> – tworzy zwykłą komórkę tabeli,
  • <th> – tworzy komórkę nagłówkową.

Podstawowy przykład

<table>
  <tr>
    <td>Imię</td>
    <td>Jan</td>
  </tr>
  <tr>
    <td>Telefon</td>
    <td>123456789</td>
  </tr>
</table>

Każdy wiersz tabeli zapisuje się w osobnym znaczniku <tr>, a komórki danego wiersza w znacznikach <td>.

Łączenie komórek w pionie: rowspan

Atrybut rowspan pozwala połączyć komórkę przez kilka wierszy, czyli w pionie.

<td rowspan="2">Telefony:</td>

Taki zapis oznacza, że komórka „Telefony:” zajmuje miejsce w dwóch kolejnych wierszach. W następnym wierszu nie należy już dodawać pustej komórki w tej kolumnie, ponieważ została ona zajęta przez rowspan.

Łączenie komórek w poziomie: colspan

Atrybut colspan łączy komórki w poziomie, czyli przez kilka kolumn.

<td colspan="2">Dane kontaktowe</td>

W pytaniach egzaminacyjnych trzeba dokładnie sprawdzić, czy komórka obejmuje kilka wierszy, czy kilka kolumn. Jeśli tekst znajduje się po lewej stronie i rozciąga się pionowo na dwa numery telefonów, należy użyć rowspan="2", a nie colspan="2".