Jak zrobić tabelę w HTML?

Aby stworzyć tabelę w HTML, wykorzystuje się specjalne znaczniki, które pozwalają uporządkować dane w czytelnej, kolumnowo-wierszowej strukturze. Poniższy poradnik opisuje szczegółowo, jak zbudować oraz zastosować różne typy tabel na stronach internetowych, wraz z praktycznymi przykładami kodu i wskazówkami dotyczącymi stylizacji.

Podstawowe znaczniki tabeli HTML

Do stworzenia najprostszej tabeli w HTML służą następujące tagi:

• <table> – otwiera i zamyka całą tabelę;
• <tr> – definiuje wiersz tabeli (table row);
• <td> – definiuje komórkę danych (table data) w wierszu;
• <th> – definiuje nagłówek kolumny (table header), który domyślnie wyświetla tekst pogrubiony i wyśrodkowany.

Przykład podstawowej tabeli

<table>
  <tr>
    <th>Imię</th>
    <th>Email</th>
    <th>Data urodzenia</th>
  </tr>
  <tr>
    <td>Jan</td>
    <td>[email protected]</td>
    <td>23.06.1982</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>[email protected]</td>
    <td>14.10.1990</td>
  </tr>
</table>

Wyjaśnienie

• Pierwszy wiersz (
  ) zawiera nagłówki kolumn (
  );
• Kolejne wiersze zawierają dane użytkowników, każdy element w osobnej komórce ( ).

Rozbudowane struktury tabeli

HTML umożliwia dodatkowe podziały i opisy tabeli przy użyciu tagów takich jak:

• <caption> – podpis tabeli (pojawia się nad nią);
• <thead> – nagłówek tabeli (zazwyczaj z );
• <tbody> – główna część tabeli;
• <tfoot> – stopka tabeli.

Przykład tabeli z sekcjami

<table>
  <caption>Lista uczestników konferencji</caption>
  <thead>
    <tr>
      <th>Imię i nazwisko</th>
      <th>Firma</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maria Zielińska</td>
      <td>Initech</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Paweł Nowak</td>
      <td>Globex</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Łącznie: 2 uczestników</td>
    </tr>
  </tfoot>
</table>

• <caption> dodaje tytuł tabeli;
• <thead>, <tbody>, <tfoot> pomagają grupować różne części tabeli i ułatwiają stylizację oraz dostępność.

Łączenie komórek – colspan, rowspan

Możesz łączyć komórki w poziomie (colspan) i w pionie (rowspan).

<tr>
  <td colspan="2">Połączone komórki</td>
  <td>Oddzielna komórka</td>
</tr>

• colspan=”2″ – komórka zajmuje dwie kolumny.

Podstawowa stylizacja tabel

HTML pozwala na modyfikację wyglądu tabeli za pomocą CSS. Przykład prostego stylu:

<style>
  table {
    border-collapse: collapse; /* scalanie ramek */
    width: 100%;
    margin: 20px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f5f5f5;
    text-align: left;
  }
</style>

• Dzięki właściwości border-collapse: collapse uzyskasz jednolite linie;
• Modyfikując background-color i padding, zwiększasz czytelność prezentowanych danych.

Przykładowe zastosowania tabel HTML

• Prezentacja cenników – porównanie planów taryfowych;
• Listy produktów – np. z parametrami technicznymi;
• Harmonogramy – plan lekcji, kalendarz wydarzeń;
• Zestawienia statystyczne – np. podsumowania;
• Rejestry użytkowników czy bazy danych – np. lista pracowników lub studentów.

Najważniejsze praktyki pracy z tabelami

• Używaj nagłówków ( ) dla kolumn, by ułatwić orientację w danych i zwiększyć dostępność;
• Stosuj sekcje <thead>, <tbody>, <tfoot> dla bardziej złożonych tabel i poprawy czytelności kodu;
• Unikaj tabel do układania elementów strony – do tego służy CSS. Tabele są przeznaczone do prezentacji danych tabularnych.

Tabele HTML to narzędzie uniwersalne i nadal niezwykle często wykorzystywane na stronach internetowych do przejrzystego prezentowania różnych danych i zestawień. Im lepiej zrozumiesz ich strukturę i możliwości stylizacji, tym czytelniejsze i bardziej estetyczne będą Twoje projekty internetowe.