wczesnych etapów rozwoju HTML. W związku z tym wyróżnia si ę dwa modele tabel - starszy prosty i nowszy złożony: Elementy modelu

Transkrypt

1 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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.

10 <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

11 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:

12 <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)">

13 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: a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5

14 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

15 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 (w mln USD) 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 (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

16 rozpocząć od komórki z nagłówkiem. <table border cellpadding="10" width="500"> <caption>wzrost produkcji masła i margaryny w latach (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 (w mln USD) Masło Margaryna 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

17 Łą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 (w mln USD) Masło Margaryna 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 i 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 ) 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 (w mln USD) Masło Margaryna 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

18 czasowej struktury nie znamy. <tr><td> </td><th colspan="2"> </th><th colspan="3"> </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 (w mln USD) Produkt Tłuszcze Masło Margaryna Przetwory owocowe Dżem Marmolada 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: AAA BBB

19 CCC DDD Ł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>

20 <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

21 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

22 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

23 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

24 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">

25 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

26 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 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