Struktura tabeli
Tabele są jednym z ważniejszych elementów używanych podczas projektowania stron internetowych. Zwykle służą do organizowania i prezentowania zwartych treści w formie siatki oraz poprawy i czytelniejszego przekroju prezentowanych danych.
Podstawowa struktura tabeli
<table>— Ten element definiuje początek i koniec tabeli. Wszystkie inne elementy związane z tabelą będą znajdowały się wewnątrz tego tagu.<tr>(table row) — Element ten definiuje wiersz tabeli. Każdy wiersz składa się z jednego lub więcej komórek danych lub nagłówków.<td>(table data) — Element ten definiuje komórkę danych w tabeli. Komórki danych przechowują faktyczne dane tabeli, które są prezentowane użytkownikowi.<th>(table header) — Ten element definiuje komórkę nagłówka tabeli. Komórki nagłówka są używane głównie do opisania kolumn tabeli i różnią się od komórek danych pod względem stylu, zwykle mają wyróżniające formatowanie, takie jak pogrubienie lub inny kolor tła.
Prosty przykład struktury tabeli:
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>32</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>28</td>
</tr>
</table>Powyższy przykład przedstawia tabelę z trzema kolumnami (Imię, Nazwisko, Wiek) i dwoma wierszami danych. Na górze tabeli znajdują się komórki nagłówka (<th>), które opisują kolumny. W kolejnych wierszach znajdują się komórki danych (<td>), które zawierają informacje o osobach.
Wygląd gotowej tabeli:
| Imię | Nazwisko | Wiek |
|---|---|---|
| Jan | Kowalski | 32 |
| Anna | Nowak | 28 |
Czytelność tabel
Tabele często służą do “ładnego” prezentowania danych, jednak aby poprawić czytelność tabeli, można dodać atrybuty, takie jak border, cellpadding i cellspacing, a także użyć stylów CSS do formatowania tabeli.
<table border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse;">
<tr>
<th style="background-color: #f2f2f2;">Imię</th>
<th style="background-color: #f2f2f2;">Nazwisko</th>
<th style="background-color: #f2f2f2;">Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>32</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>28</td>
</tr>
</table>
W powyższym przykładzie zostały dodane atrybuty border, cellpadding i cellspacing, a także styl CSS dla elementów <th> i <table>. Atrybut border definiuje grubość ramki wokół tabeli i komórek, cellpadding określa odstęp między zawartością komórki a jej ramką, a cellspacing kontroluje odstęp między komórkami tabeli.
Wygląd gotowej tabeli:
| Imię | Nazwisko | Wiek |
|---|---|---|
| Jan | Kowalski | 32 |
| Anna | Nowak | 28 |
Warto zaznacyzć, że styl border-collapse: collapse; sprawia, że ramki komórek są łączone w jedną linię, a tło nagłówka zostało zmienione na szary (background-color: #f2f2f2;) dla lepszej czytelności.
Warto zapamiętać
W praktyce zaleca się używanie arkuszy stylów CSS do formatowania tabel, gdyż pozwala to na większą elastyczność i utrzymanie kodu w czystości. Oczywiście istnieją uzasadnione przypadki, jak np. tworzenie mailingów, gdzie nie ma możliwości dołączenia zewnętrznych styli, więc cała struktura opiera się na liniowym stylowaniu atrybutów. W powyższych przykładach przedstawiłem podstawowe zastosowanie atrybutów i stylów w liniowych tagach HTML, aby pokazać różne możliwości formatowania tabeli.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
