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 b1 a2 a3 a4 a5 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 to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst <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 to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jakiś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst to jest jaki ś tekst 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: a1 a2 a2 Tytuł tabeli 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> a1 a2 a2 Tytuł tabeli b1 b2 b3 <caption style="caption-side: bottom; ">Tytuł tabeli</caption> a1 a2 a2 Tytuł tabeli 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 (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 4350 Margaryna 800 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> </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) Produkt 1991-199 2 1993 1994 1995 Tłuszcze Masło 2390 1380 1420 1550 Margaryna 1700 980 1150 1320 Przetwory owocowe Dżem 750 840 880 1020 1150 Marmolada 400 500 570 750 820 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 b1 a2 a3 b2 b3 c1 c2 c3 Wartość frame="above" wstawia górn ą krawęd ź obramowania, a frame="below" - doln ą. a1 b1 a2 a3 b2 b3 c1 c2 c3 a1 b1 a2 a3 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 b1 a2 a3 b2 b3 c1 c2 c3 a1 b1 a2 a3 b2 b3 c1 c2 c3 Wartość praw ą. frame="lhs" wyświetla lew ą krawęd ź obramowania, a frame="rhs" - a1 b1 a2 a3 b2 b3 c1 c2 c3 a1 b1 a2 a3 b2 b3 c1 c2 c3 Wartość frame="box" wyświetla wszystkie krawędzie obramowania. a1 b1 a2 a3 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 b1 a2 a3 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