Podstawy tworzenia tabel (<table>, <tr>, <td>, <th>)

Tabele w HTML służą do prezentowania danych w sposób uporządkowany, w formie siatki. Każda tabela jest zbudowana z wierszy i kolumn, które umożliwiają organizację informacji w przejrzysty sposób. Elementy <table>, <tr>, <td> i <th> tworzą strukturę tabeli, którą omówimy szczegółowo w tym artykule.

Podstawowe elementy tabeli HTML

• <table> - Główny kontener tabeli.
• <tr> - Reprezentuje wiersz tabeli.
• <td> - Komórka danych tabeli.
• <th> - Komórka nagłówkowa tabeli.

<table>
    <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
        <th>Wiek</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>Kowalski</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>Nowak</td>
        <td>25</td>
    </tr>
</table>

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Atrybuty elementów tabeli

HTML oferuje wiele atrybutów, które pozwalają na modyfikację wyglądu i działania tabel.

• <border> - Określa grubość obramowania tabeli. Może być ustawione jako atrybut w <table>.
• <cellpadding> - Dodaje wewnętrzne marginesy do komórek tabeli.
• <cellspacing> - Ustawia odstępy pomiędzy komórkami.
• <colspan> - Określa, na ile kolumn ma się rozciągać dana komórka.
• <rowspan> - Określa, na ile wierszy ma się rozciągać dana komórka.

Przykład tabeli z atrybutami:

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Grupowanie elementów tabeli

Można grupować różne sekcje tabeli, takie jak nagłówki, treści i stopki, używając elementów <thead>, <tbody>, i <tfoot>.

• <thead> - Definiuje nagłówkową część tabeli.
• <tbody> - Definiuje główną część tabeli z danymi.
• <tfoot> - Definiuje stopkę tabeli, która może zawierać np. podsumowanie.

Przykład tabeli z podziałem na sekcje:

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Tabele HTML umożliwiają organizowanie i prezentowanie danych w uporządkowany sposób. Kluczowe elementy, takie jak <table>, <tr>, <td>, i <th>, tworzą podstawową strukturę tabeli, którą można łatwo dostosować i stylizować za pomocą CSS. Grupowanie sekcji tabeli za pomocą <thead>, <tbody>, i <tfoot> pomaga w organizacji danych, a dodanie stylizacji poprawia jej wygląd i czytelność.