#5 Tabele HTML

Zobacz więcej...

Struktura podstawowa tabel

Tabela w języku HTML to struktura służąca do organizowania danych w formie siatki, składającej się z wierszy i kolumn. Jest używana do prezentacji danych o powtarzającym się charakterze w uporządkowany i czytelny sposób.

• Znacznik <table>...</table>: oznacza początek i koniec całej tabeli.
• Znacznik <tr>...</tr>: służy do wstawiania nowego wiersza. W każdym wierszu danej tabeli powinna znajdować się taka sama liczba komórek.
• Znacznik <td>...</td>: tworzy pojedynczą komórkę (rubrykę) w tabeli, czyli prostokątną przestrzeń na przecięciu wiersza i kolumny, w której można umieścić tekst lub inne elementy.
  • Należy pamiętać, że komórki tabeli <td> muszą znajdować się wewnątrz znaczników wierszy <tr>.
  • Domyślnie tabele nie mają obramowania, co może sprawić, że są mało czytelne. Obramowanie można dodać za pomocą atrybutu <table border="1">.
  • Wąską tabelę można wyśrodkować, używając atrybutu style="margin: auto" w znaczniku <table>.

Nagłówki i tytuły tabeli

• Komórki nagłówkowe <th>: służą do wstawiania komórek nagłówkowych zamiast zwykłych komórek <td>. Tekst w nich jest zazwyczaj pogrubiony i wyśrodkowany.
  • Użycie <th> jest zalecane ze względu na ważne znaczenie semantyczne, chociaż efekt wizualny można by uzyskać przy użyciu <td> i stylów.
  • Nagłówki mogą być poziome, pionowe lub mieszane.
• Tytuł tabeli <caption>: służy do wstawiania tytułu (podpisu) tabeli.
  • Element <caption> musi znajdować się zaraz po otwierającym znaczniku <table>.
  • Domyślnie tytuł wyświetla się na środku ponad tabelą.
• Dymek narzędziowy: w obszernych tabelach, dla każdej zwykłej komórki <td>, przydatne jest określenie atrybutu title="tekst". Wartość tego atrybutu (np. treść nagłówka) pojawi się w dymku podpowiedzi po najechaniu myszą, co ułatwia czytanie, gdy nagłówki znikną z ekranu.

Łączenie komórek (scalanie)

Polecenie to pozwala na łączenie kilku sąsiadujących komórek w jedną większą. Połączona komórka rozciąga się na kilka komórek pojedynczych, eliminując tym samym zbędne znaczniki <td>.

• Łączenie poziome: atrybut colspan="x" (gdzie "x" to liczba scalanych komórek) dodawany jest do znaczników <td> lub <th> w celu połączenia komórek w poziomie.
• Łączenie pionowe: atrybut rowspan="y" dodawany jest do znaczników <td> lub <th> w celu połączenia komórek w pionie (w dół przez wiersze).

Grupowanie wierszy, nagłówki i stopki funkcjonalne

Znaczniki te pozwalają na łączenie wierszy w grupy funkcjonalne, co umożliwia łatwiejsze formatowanie za pomocą CSS. W tabeli powinien znajdować się tylko jeden nagłówek i jedna stopka, ale dowolna ilość sekcji ciała.

• Nagłówek tabeli <thead>: tworzy nagłówek tabeli, który pojawi się na szczycie.
• Stopka tabeli <tfoot>: tworzy stopkę tabeli, która pojawi się na dole. Ważna zasada: znacznik <tfoot> musi znajdować się w kodzie zaraz po <thead>, czyli przed <tbody>. Ma to ułatwić renderowanie, zanim wczytają się wszystkie wiersze.
• Ciało sekcji tabeli <tbody>: łączy dowolną liczbę wierszy, stanowiąc główną treść tabeli. Jeśli użyjemy choć jednego znacznika <tbody>, wszystkie pozostałe wiersze muszą być w nie objęte.

Grupowanie kolumn i zagnieżdżanie tabel

• Grupowanie kolumn <colgroup>: służy do łączenia kolumn w grupy strukturalne i umożliwia nadawanie formatowania całej grupie za pomocą CSS. Atrybut span="x" określa liczbę kolumn do połączenia.
• Pojedyncza kolumna <col>: jest używana wewnątrz <colgroup> i pozwala nadać dodatkowe atrybuty poszczególnym kolumnom. Formatowanie z <col> nadpisuje formatowanie określone dla całej grupy <colgroup>.
• Zagnieżdżanie tabel: możliwe jest wstawianie tabel jedna w drugiej. Tabela podrzędna (wewnętrzna) jest umieszczana wewnątrz znacznika komórki <td> tabeli nadrzędnej (zewnętrznej). Zagnieżdżanie może jednak obniżyć czytelność konstrukcji przy zbyt wielu poziomach.