Tabele

O rozdziale: Tabele służą do tworzenia zestawień danych tabelarycznych - typowym przykładem zastosowania może być tabela wielkości produktu narodowego w wybranych krajach, w kolejnych latach, czy też zestawienie najbardziej ludnych państw świata. W rozdziale opisujemy szczegółowo techniki budowania i formatowania tabel.

Podkreślamy w tym miejscu wyraźnie, że współcześnie panuje tendencja odchodzenia od stosowania tabel w charakterze szkieletu stron (typowe zastosowanie w wielu portalach, z których maniera ta rozpowszechniła się na cały Internet - gwoli prawdy podkreślmy, że i poprzednia wersja kursu HTML korzystała z tabeli jako szkieletu strony głównej).

Obecnie, zgodnie z zasadami tzw. webmasterstwa semantycznego (używanie znaczników zgodnie z ich naturalnym przeznaczeniem), tabelom przypisuje się wyłącznie rolę pojemnika dla danych tabelarycznych, natomiast układy stron budowane są z użyciem pojemników (bloków, warstw) div, formatowanych za pomocą kaskadowych arkuszy stylów CSS. Zapewne proces przechodzenia z układów ramkowych czy tabelarycznych na blokowe będzie trwać długo i być może nigdy sie nie zakończy, ale wskazujemy tutaj na istniejącą tendencję i zalecane przez specjalistów rozwiązania.

Definicja tabeli została znacznie rozwinięta w stosunku do pierwszych definicji z wczesnych etapów rozwoju HTML. W związku z tym wyróżnia się dwa modele tabel - starszy prosty i nowszy złożony:

Nazwa modelu	Elementy modelu
Simple Table Model	table, caption, tr, th, td
Complex Table Model	table, colgroup, col, caption, thead, tbody, tfoot, tr, th, td

Ogólne ramy tabeli

Ramy tabeli tworzone są za pomocą polecenia:

<table> </table>

Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

Informacje o TABLE

Wiersz tabeli

Wiersze tabeli wprowadzamy za pomocą polecenia:

<tr> </tr>

Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładu:

Zwróć uwagę, ze wprowadzenie definicji tabeli table, a w jej ramach pewnej liczby wierszy tr nie powoduje jeszcze wyświetlenia tabeli. Dopiero zdefiniowanie komórek, o których piszemy niżej, pozwoli wyświetlić tabelaryczny układ danych.

Informacje o TR

Komórka w wierszu

Komórki tabeli wprowadzamy za pomocą polecenia:

<td> </td>

Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego wiersza, na przykład:

Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co naturalnie nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Sposób pisania to kwestia wygody użytkownika.

Przykład tabeli:

Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach (w ramach znaczników <td> </td>) zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwilę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.

Informacje o TD

Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

<table border> </table>

Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład:

<table border="10"> </table>

Odległości między komórkami

Aby odległości miedzy komórkami w pikselach były inne niż domyślne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi.

<table border cellspacing="8"> </table>

W efekcie uzyskamy:

Porównaj ten atrybut z marginesami wyrażanymi za pomocą stylów.

Odstępy w komórkach

Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem (mierzony w pikselach) jest zbyt mały, możemy użyć atrybutu cellpadding (domyślnie wynosi on 1).

<table border cellspacing="5" cellpadding="15"> </table>

W rezultacie uzyskamy:

Oczywiście należy w rozsądny sposób ustawiać wartości atrybutów, gdyż np. zbyt grube obramowanie czy zbyt mały odstęp treści od obramowania czyni tabelę mniej przejrzystą i niezbyt estetyczną, co pokazuje poniższy przykład.

Porównaj ten atrybut z odstępami wyrażanymi za pomocą stylów.

Szerokość tabeli

Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany atrybut jest "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie.

<table border width="600"> </table>

Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach.

Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości nadrzędnego pojemnika, w którym mieści się tabela (w naszym przykładzie połowa szerokości białego obszaru, w jakim mieści się ten rozdział).

<table border width="50%"> </table>

I efekt:

Szerokość komórki

W starszych wersjach HTML do wyznaczenia szerokości komórki stosowano atrybut width. W HTML 4.01 i XHTML 1.0 jest on uznany za przestarzały (zarzucony ostatecznie w XHTML 1.1) i szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości elementu.

<td style="width: 150px; ">zawartość komórki</td>

Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu.

<td style="width: 50%; ">zawartość komórki</td>

Zwróć uwagę, że wystarczy podać szerokość komórek w pierwszym wierszu, aby pozostałe, w kolejnych wierszach, przyjęły te same wartości.

Wyrównanie tabeli

W starszych wersjach HTML stosowany był atrybut align, który pozwalał wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu - stosowano wartości right, left i center. W HTML 4.01 i XHTML 1.0 jest to atrybut uznany za przestarzały, a z XHTML 1.1 wycofany - w to miejsce zaleca się stosowanie stylów.

<table style="float:right; "></table>

W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem.

<table style="float:left; "></table>

W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem.

Poziome wyrównanie danych w komórkach

Atrybut align wykorzystuje się także do poziomego wyrównania zawartości komórki (a nawet całego wiersza tr) - środkowania, justowania do lewej i justowania do prawej, z użyciem wartości center, left i right.

Oto wynik:

Teoretycznie możliwe jest też wyrównanie według znaku (można wstawiać ten atrybut w komórkach, wierszach i grupach kolumn), co znajduje praktyczne zastosowanie w wyrównywaniu liczb ze znakami po przecinku, pozwalając poprawnie wyrównywać je właśnie według podanego znaku - niestety, żadna z przeglądarek nie interpretuje tego atrybutu.

Alternatywnie stosuje się też style CSS, dajace ten sam efekt.

Wysokość tabeli

Wysokość tabeli była niekiedy dawniej regulowana za pomocą nieoficjalnego, niewchodzącego w skład HTML atrybutu height, o wartościach w pikselach lub procencie widocznego okna, ignorowanego zresztą przez niektóre przeglądarki. Poprawne może być jedynie podanie wysokości za pomocą stylów CSS, na przykład:

<table border style="height: 200px; width: 60%; ">

Wynik podania tej wartości:

Wartość podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysokości.

<div style="height: 200px; ">
<table border style="height: 50%; width: 60%; ">

Pionowe wyrównanie danych w komórkach

Atrybut valign (vertical align) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji:

Wynik:

Kolor tła tabeli

W starszych wersjach HTML stosowano atrybut bgcolor, który pozwalał zdefiniować kolor tła calej tabeli, wiersza lub wybranych komórek. W HTML 4.01 i XHTML 1.0 jest to atrybut przestarzały, zaś z XHTML 1.1 w ogóle go wycofano na rzecz stylów.

Przykład zdefiniowania odrębnych kolorów w każdej z komórek:

Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka - poprzednio stosowano atrybut background="nazwa_obrazka", ale obecnie jest to polecenie przestarzałe i stosuje się style CSS:

<table style="background-image: url(adres_obrazka)">

Użycie style="background-image: url(../grafika/canvas2.gif)" da tutaj następujący efekt:

Kolor obramowania tabeli

Stosowany niekiedy wcześniej atrybut bordercolor był niestandardowym rozszerzeniem Internet Explorera, który został też zaakceptowany przez Navigatora. Należy unikać tego atrybutu, natomiast swobodę definiowania kolorów obramowania dają nam obecnie style CSS - połączenie stylu, grubości i koloru obramowania.

Przykładowy kod:

<table border cellspacing="1" cellpadding="5" style="border: 15px outset #D2691E; ">

I wynik:

Tytuł tabeli

Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólnymi ramami tabeli. Na przykład:

<table border style="width: 300px; ">
<caption>Tytuł tabeli</caption>

I żywy efekt:

Za pomocą stylów CSS możesz zdefiniować położenie tytułu, nad lub pod tabelą:

<caption style="caption-side: top; ">Tytuł tabeli</caption>

<caption style="caption-side: bottom; ">Tytuł tabeli</caption>

Informacje o CAPTION

Nagłówek wiersza i kolumny

Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowane na środku. Przykład nagłówków kolumn:

Nagłówek jest definiowany za pomocą znaczników:

<th> </th>

Powyższa, przykładowa tabela ma więc kod:

Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.

Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem.

co da w rezultacie:

W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi.

Zauważmy też, że wiersz nagłówków z latami został poprzedzony pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób ułożone w stosunku do kolumn z danymi. Gdybyśmy chcieli, aby ta pusta komórka była "wklęsła", możemy w niej wstawić "lepką spację", czyli kod &nbsp; (non-breaking space).

Informacje o TH

Łączenie komórek

Komórki danych i/lub nagłówków można ze sobą łączyć. Na przykład:

W powyższym przykładzie, znając łączną produkcję tłuszczów, ale nie znając jej struktury, przedstawiliśmy łączne dane dla dwóch kolejnych lat - 1991 i 1992.

Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x">. W naszej tabeli zostały opatrzone atrybutem rowspan="2" dwie pierwsze komórki z danymi w wierszu Masło (i oczywiście podana łączna produkcja tłuszczów). Jednocześnie usunęliśmy dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło.

Podobnie można łączyć komórki w kolumnach, stosując dla nagłówków atrybut th colspan="y", a dla danych td colspan="z".

W przykładzie zostało pokazane poziome łączenie komórek - połączono w ten sposób komórki nagłówków z latami i komórki dotyczące produkcji masła, której czasowej struktury nie znamy.

<tr><td>&nbsp;</td><th colspan="2">1991-1992</th><th colspan="3">1993-1995</th></tr>
<tr style="text-align: center"><th>Masło</th><td colspan="2">2390</td><td colspan="3">4350</td></tr>
<tr style="text-align: center"><th>Margaryna</th><td>800</td><td>900</td><td>980</td><td>1150</td><td>1320</td></tr>

I jeszcze jeden, bardziej skomplikowany przykład łączenia komórek, z wykorzystaniem colspan i rowspan w jednej tabeli:

Zagnieżdżanie tabel

Możliwe jest zagnieżdżanie tabel w komórkach nadrzędnej tabeli. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <td> </td>. Na przykład:

Łatwo dostrzec, że tabela złożona z dwóch wierszy i dwóch kolumn została zagnieżdżona w komórce z wartością 300.

Uwaga: zagnieżdżanie tabel w tabelach, często spotykane przy tworzeniu bardzo skomplikowanych konstrukcyjnie layoutów stron, nie jest uważane za dobrą manierę i raczej odradza się stosowanie tej techniki, tym bardziej, że samo opieranie stron na szkieletach tabel jest dzisiaj już techniką uznawaną za niewłaściwą.

Sekcje tabeli - nagłówek, ciało i stopka

Podobnie jak cały dokument, także i tabela może mieć sekcje - część nagłówkową, część główną i stopkę. Elementy te są (teoretycznie) przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli.

Podział tabeli na sekcje jest odzwierciedleniem idei tzw. Complex Table Model, obejmującego polecenia table, colgroup, col, caption, thead, tbody, tfoot, tr, th, td, a będącego rozszerzeniem starszej idei Simple Table Model.

Uwaga: nie należy mylić sekcji nagłówkowej tabeli z nagłówkami kolumn i wierszy, mimo zbieżności nazwy.

Wydzielenie nagłówka i stopki pozwala, teoretycznie, wyświetlać zawsze na ekranie (i drukować) zawarte w nich informacje, gdy tabela przekracza wielkością ekran czy stronę druku. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w ciele tabeli tbody. Na razie przeglądarki nie interpretują w ten sposób nagłówka i stopki tabeli. Wszystkie trzy główne przeglądarki w swych najnowszych wersjach wyświetlają jednak poprawnie kolejność części.

Uwaga: tfoot musi być zdefiniowane w tabeli przed tbody.

I rezultat:

Zauważ, że gdy komórek w wierszu tabeli jest więcej niż 1, to i część nagłówkowa oraz stopka tabeli powinny mieć albo tyle samo komórek w wierszu, albo zastosowany atrybut colspan="x".

Informacje o THEAD

Informacje o TBODY

Informacje o TFOOT

Krawędzie tabeli

HTML 4 zawiera dwa nowe atrybuty pozwalające zdefiniować sposób wyświetlania zewnętrznych krawędzi tabel (frame) i wewnętrznych linii rozdzielających komórki (rules). Atrybutów frame i rules używamy razem z atrybutem border="x" wyznaczającym grubość obramowań.

Wyjdźmy od podstawowej definicji tabeli, zawierającej, przykładowo, 3 wiersze i 3 kolumny (dla przejrzystości przykładu stosujemy w nim atrybut cellpadding="5").

Atrybut frame="wartość" pozwala wyświetlać w specjalny sposób obramowanie tabeli. Wstawiamy go bezpośrednio do definicji tabeli.

Przykłady wartości frame podajemy w połączeniu z wartością rules="none", czyli bez obecności wewnętrznych krawędzi.

<table border="1" frame="wartość" rules="none">

Wartość frame="void" pozwala usunąć zewnętrzne obramowanie tabeli.

Wartość frame="above" wstawia górną krawędź obramowania, a frame="below" - dolną.

Wartość frame="vsides" wyświetla lewą i prawą krawędź obramowania tabeli, a frame="hsides" - górną i dolną.

Wartość frame="lhs" wyświetla lewą krawędź obramowania, a frame="rhs" - prawą.

Wartość frame="box" wyświetla wszystkie krawędzie obramowania.

Seria wartości atrybutu rules="wartość" pozwala manipulować wewnętrznymi krawędziami tabeli (przykłady podajemy z użyciem frame="void", czyli bez obecności krawędzi zewnętrznych).

<table border="x" rules="wartość" frame="void">

Wartość rules="none" powoduje usunięcie linii wewnętrznych.

Wartość rules=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych.

Wartość rules="cols" powoduje wyświetlenie tylko pionowych linii wewnętrznych (Opera ma problemy).

Wartość rules="all" powoduje wyświetlenie wszystkich linii wewnętrznych.

Wartość rules="groups" powoduje wyświetlenie tylko linii wewnętrznych dzielących część nagłówka, ciała i stopki tabeli oraz grup kolumn.

Istotna informacja o kolumnach i grupach kolumn.

W tabeli (zaraz za poleceniem <table>) możemy definiować grupy kolumn, używając polecenia colgroup span (grupa), a w ich ramach ewentualnie dodatkowo definiować atrybuty kolumny col (pojedyncza kolumna). Przykładowo:

<colgroup span="4" align="center"> spowoduje wydzielenie grupy 4 kolumn (span="4") i środkowanie ich zawartości.
<col align="right"> spowoduje wydzielenie 1 kolumny i wyrównanie jej zawartości do prawego marginesu.

Przykładowo załóżmy, że mamy tabelę o 4 kolumnach. Wydzielmy grupy kolumn - pierwsza grupa zawiera kolumnę z tekstem, wyrównywaną do prawego marginesu, druga zawiera 3 kolumny z liczbami, wyrównanymi do środka:

<colgroup span="1">
    <col align="right">
<colgroup span="3">
    <col align="center">

    <col align="center">
    <col align="center">

Oczywiście, w tym przypadku możemy nawet uprościć definicję, rezygnując z podawania polecenia col, a przenosząc wyrównanie do colgroup, gdyż wszystkie kolumny drugiej grupy są wyrównywane do środka.

<colgroup span="1" align="right">

<colgroup span="3" align="center">

Żywy przykład:

Informacje o COL

Informacje o COLGROUP

Tak określony grupy kolumn możemy teraz oddzielić od siebie krawędziami, stosując atrybut rules="groups".

Jak widzimy, atrybut rules="groups" spowodował wstawienie krawędzi między wydzielone grupy kolumn. Krawędzi zewnętrznej nie ma, gdyż usunął ją tutaj atrybut frame="void".

Wstawianie krawędzi między grupy kolumn można zastosować w odniesieniu zarówno do grup kolumn wydzielanych ręcznie, jak i części tabeli definiowanych przez polecenia thead, tfoot i tbody. Poniższa tabela pokazuje właśnie przykład, w którym są wydzielone nagłówek (z tytułami kolumn), ciało (z danymi) i stopka tabeli, zaś kolumny zostałt podzielone na dwie grupy: pierwsza z kolumną zawierającą nazwy owoców, a druga zawierająca kolumny z danymi. Podanie w definicji tabeli table atrybutów border="1" frame="void" rules="groups" da ostateczny efekt w postaci poniższej tabeli.