Kurs języka HTML - poradnik webmastera: Tabele

Tematy: Ogólne ramy tabeli | Wiersz tabeli | Komórka w
wierszu | Obramowanie tabeli | Odległości między komórkami |
Odstępy w komórkach | Szerokość tabeli | Szerokość komórki |
Wyrównanie tabeli | Poziome wyrównanie danych w komórkach |
Wysokość tabeli | Pionowe wyrównanie danych w komórkach |
Kolor tła tabeli | Kolor obramowania tabeli | Tytuł tabeli |
Nagłówek wiersza i kolumny | Łączenie komórek |
Zagnieżdżanie tabel | Sekcje tabeli | Krawędzie tabeli
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:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
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:
<table>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
<tr> <td> </td><td> </td><td> </td></tr>
</table>
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:
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
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>
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona
odpowiednio zinterpretowana przez przeglądarkę, na przykład:
<table border="10"> </table>
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1
c2 c3 c4 c5
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:
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
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:
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
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.
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
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.
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
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:
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
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>
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
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>
a1 a2 a3 a4 a5
b1 b2 b3 b4 b5
c1 c2 c3 c4 c5
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.
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
to jest
jakiś
tekst to
jest
jakiś
tekst to
jest
jakiś
tekst to
<table style="float:left; "></table>
W efekcie tabela zostanie przesunięta w lewo i oblana z prawej strony tekstem.
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
to jest jakiś tekst
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
jest jakiś tekst to
jakiś tekst to jest
tekst to jest jakiś
to jest
jakiś
tekst to
jest
jakiś
tekst to
jest
jakiś
tekst to
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.
<td align="left"> </td>
<td align="center"> </td>
<td align="right"> </td>
Oto wynik:
a1 - do lewej
a2 - środkowanie
a3 - do prawej
b1 - do lewej
b2 - środkowanie
b3 - do prawej
c1 - do lewej
c2 - środkowanie
c3 - do prawej
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.
<td align="char" char=",">10,59</td>
<td align="char" char=",">100,48</td>
<td align="char" char=",">12,592</td>
Alternatywnie stosuje się też style CSS, dajace ten sam efekt.
<td style="text-align: left; "> </td>
<td style="text-align: center; "> </td>
<td style="text-align: right; "> </td>
a1 - do lewej
a2 - środkowanie
a3 - do prawej
b1 - do lewej
b2 - środkowanie
b3 - do prawej
c1 - do lewej
c2 - środkowanie
c3 - do prawej
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:
Komórka a1 Komórka a2
Komórka a3 Komórka a4
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%; ">
Komórka a1 Komórka a2
Komórka a3 Komórka a4
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:
<td valign="top"> </td>
<td valign="middle"> </td>
<td valign="bottom"> </td>
Wynik:
a1 - do górnego brzegu a2 - do górnego brzegu a3 - do górnego brzegu
b1 - do górnego brzegu b2 - do dolnego brzegu b3 - do środka
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.
<table style="background-color: red">
<tr style="background-color: beige">
<td style="background-color: green">
Przykład zdefiniowania odrębnych kolorów w każdej z komórek:
czerwona komórka
zielona komórka
żółta komórka
beżowa komórka
niebieska komórka
różowa komórka
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:
111 222 333
444 555 666
777 888 999
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:
a1
a2
a3
a4
a5
b1
b2
b3
b4
b5
c1
c2
c3
c4
c5
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:
Tytuł tabeli
a1 a2 a2
b1 b2 b3
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>
Tytuł tabeli
a1 a2 a2
b1 b2 b3
<caption style="caption-side: bottom; ">Tytuł tabeli</caption>
Tytuł tabeli
a1 a2 a2
b1 b2 b3
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:
Wzrost produkcji w latach 1991-1995 (w mln USD)
1991
1992
1993
1994
1995
1150
1240
1380
1420
1550
Nagłówek jest definiowany za pomocą znaczników:
<th> </th>
Powyższa, przykładowa tabela ma więc kod:
<table border cellpadding="10" width="400">
<caption>Wzrost produkcji w latach 1991-1995 (w mln USD)</caption>
<tr>
<th>1991</th> <th>1992</th><th>1993</th> <th>1994</th>
<th>1995</th>
</tr>
<tr style="text-align:center">
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550<
/td>
</tr>
</table>
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.
<table border cellpadding="10" width="500">
<caption>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln
USD)</caption>
<tr><td></td><th>1991</th> <th>1992</th> <th>1993</th>
<th>1994</th> <th>1995</th> </tr>
<tr style="text-align: center; "><th>Masło</th>
<td>1150</td><td>1240</td><td>1380</td><td>1420</td><td>1550<
/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>
</table>
co da w rezultacie:
Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
1991
1992
1993
1994
1995
Masło
1150
1240
1380
1420
1550
Margaryna
800
900
980
1150
1320
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; (nonbreaking space).
Informacje o TH
Ł ączenie komórek
Komórki danych i/lub nagłówków można ze sobą łączyć. Na przykład:
Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
1991 1992 1993 1994 1995
Masło
1380 1420 1550
1950 2120
Margaryna
980
1150 1320
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.
<tr style="text-align: center">
<th>Masło</th><td rowspan="2">1950</td><td
rowspan="2">2120</td><td>1380</td><td>1420</td><td>1550</td>
</tr>
Podobnie można łączyć komórki w kolumnach, stosując dla nagłówków atrybut
th colspan="y", a dla danych td colspan="z".
Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
1991-1992
1993-1995
Masło
2390
Margaryna 800
4350
900
980 1150 1320
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:
Wzrost produkcji tłuszczów i przetworów owocowych
w latach 1991-1995 (w mln USD)
1991-199
2
1993
1994
1995
Masło
2390
1380
1420
1550
Margaryna
1700
980
1150
1320
Produkt
Tłuszcze
Dżem
750
840
880
1020
1150
Marmolada
400
500
570
750
820
Przetwory
owocowe
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:
100 200
300
AAA
BBB
CCC
DDD
400 500 600
Ł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.
<table width="300" border cellpadding=5>
<thead><tr><td colspan="2">To jest część
nagłówkowa</td></tr></thead>
<tfoot><tr><td colspan="2">To jest stopka</td></tr></tfoot>
<tbody>
<tr>
<td>komórka 11</td>
</tr>
<tr>
<td>komórka 21</td>
</tr>
</tbody>
</table>
I rezultat:
To jest część nagłówkowa
To jest stopka
Komórka 11
Komórka 12
Komórka 21
Komórka 22
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").
a1 a2 a3
b1 b2 b3
c1 c2 c3
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.
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość frame="above" wstawia górną krawędź obramowania, a
frame="below" - dolną.
a1 a2 a3
b1 b2 b3
c1 c2 c3
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość frame="vsides" wyświetla lewą i prawą krawędź obramowania tabeli,
a frame="hsides" - górną i dolną.
a1 a2 a3
b1 b2 b3
c1 c2 c3
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość frame="lhs" wyświetla lewą krawędź obramowania, a frame="rhs" prawą.
a1 a2 a3
b1 b2 b3
c1 c2 c3
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość frame="box" wyświetla wszystkie krawędzie obramowania.
a1 a2 a3
b1 b2 b3
c1 c2 c3
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.
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość rules=rows powoduje wyświetlenie tylko poziomych linii
wewnętrznych.
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość rules="cols" powoduje wyświetlenie tylko pionowych linii
wewnętrznych (Opera ma problemy).
a1 a2 a3
b1 b2 b3
c1 c2 c3
Wartość rules="all" powoduje wyświetlenie wszystkich linii wewnętrznych.
a1 a2 a3
b1 b2 b3
c1 c2 c3
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:
śliwki 1,2
1,3
0,9
gruszki 0,8
1,1
1,4
jabłka 3,1
2,7
2,2
czereśnie 0,4
0,3
0,6
wiśnie 0,2
0,4
0,3
Informacje o COL
Informacje o COLGROUP
Tak określony grupy kolumn możemy teraz oddzielić od siebie krawędziami,
stosując atrybut rules="groups".
<table border="1" cellpadding="5" frame="void" rules="groups">
<colgroup span="1" align="right">
<colgroup span="3" align="center">
<tr><td>...
...
śliwki 1,2
1,3
0,9
gruszki 0,8
1,1
1,4
jabłka 3,1
2,7
2,2
czereśnie 0,4
0,3
0,6
wiśnie 0,2
0,4
0,3
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.
produkcja 2002 2003 2004 2005
w mln ton
śliwki
1,2
1,3
0,9
1,5
gruszki
0,8
1,1
1,4
0,5
jabłka
3,1
2,7
2,2
3,0
czereśnie
0,4
0,3
0,6
0,5
wiśnie
0,2
0,4
0,3
0,6