zajmiemy się kolejnym zagadnieniem, któ-
rym są wiersze i komórki. Wewnątrz elementu umieszczana jest
zawartość tabeli. W języku HTML tabele definiowane są wiersz po wierszu, a każdy
z nich zawiera definicje wszystkich komórek w nim zawartych. Tak więc, aby zdefi-
niować tabelę, musisz rozpocząć od górnego wiersza i w nim określić wszystkie ko-
mórki, następnie drugi wiersz i jego komórki, itd. Kolumny obliczane są automatycznie,
w oparciu o liczbę komórek w każdym z wierszy.
Wiersz jest tworzony za pomocÄ… znacznika otwierajÄ…cego i znacznika zamykajÄ…-
cego
. Z kolei każdy z wierszy ma swoje komórki, które definiowane są za po-
mocą pary znaczników & | (w przypadku komórek nagłówka) i pary
& | (dla komórek danych). Liczba wierszy nie jest ograniczona, również nie
ma ograniczeń liczby komórek w wierszu, zależy ona jedynie od tego, ile kolumn jest
Ci potrzebnych. Musisz zadbać tylko o to, by każdy wiersz miał tę samą liczbę komó-
rek, wynika to z liczby kolumn.
Komórki umieszczone w wierszach tabeli są oznaczane przy użyciu dwóch elementów.
& | te elementy są używane do tworzenia komórek nagłówka.
Nagłówki są zazwyczaj wyświetlane w inny sposób niż pozostałe komórki tabeli (na
przykład, pogrubioną czcionką) i powinny być zamykane znacznikiem ;
& | te elementy są używane do tworzenia komórek danych. Litery
td to skrót od słów table data , czyli dane (zawartość) tabeli. Każda komórka
tabeli rozpoczynająca się znacznikiem powinna zostać zakończona znacznikiem
| .
W pierwszych definicjach tabel, zamykające znaczniki i wymagane były
dla każdego wiersza i komórki. Od tamtych czasów zmieniło się wiele, a przede wszystkim to,
że znaczniki zamykające są opcjonalne. Jednak wiele przeglądarek obsługujących tabele ciągle
oczekuje tych znaczników i ich brak może być przyczyną kłopotów z wyświetleniem tabel. Do-
póki w różnych typach przeglądarek nie pojawi się jednolita implementacja tabel, należy stoso-
wać wspomniane znaczniki zamykające, mimo dowolności ich stosowania. Oprócz tego ich
obecność jest całkowicie poprawna i nic nas nie zmusza do rezygnacji z nich.
Rozdział 11. Tabele 289
W przedstawionym wcześniej przykładzie, komórki nagłówka zostały umieszczone
w pierwszym wierszu tabeli, a definiuje je następujący fragment kodu:
ImiÄ™ |
Wzrost |
Waga |
Kolor oczu |
Po nagłówku w tabeli zostały umieszczone trzy wiersze składające się ze zwyczajnych
komórek:
Alicja |
171 |
57 |
niebieski |
Tomek |
185 |
82 |
chabrowe |
Zuzanna |
160 |
52 |
brÄ…zowe |
Jak pokazałam na wcześniejszym przykładzie, nagłówki można wyświetlić na samej gó-
rze tabeli, umieszczajÄ…c je w jej pierwszym wierszu. Wprowadzmy jednak pewne mo-
dyfikacje w naszym przykładzie. Tym razem umieścimy nagłówki wzdłuż lewej krawę-
dzi tabeli. W tym celu należy umieścić znaczniki jako pierwszą komórkę każdego
wiersza tabeli. Po każdym z nagłówków trzeba wprowadzić odpowiednie komórki z in-
formacjami. Zmodyfikowany kod tabeli ma następującą postać.
Na rysunku 11.2 możesz zobaczyć zmodyfikowaną tabelę.
|
ImiÄ™ |
Alicja |
Tomek |
Zuzanna |
Wzrost |
171 |
185 |
160 |
Waga |
57 |
82 |
52 |
290 Część 4. Arkusze stylów, tabele i ramki
Kolor oczu |
niebieski |
chabrowe |
brÄ…zowe |
Rysunek 11.2.
Nagłówki tabeli
wyświetlone
w lewej kolumnie
Puste komórki
Wszystkie komórki tabeli, zarówno komórki nagłówka, jak i komórki danych mogą
zawierać tekst oraz kod HTML (w tym: listy, połączenia, formularze, a nawet inne tabe-
le). A co w przypadku, gdy chcesz utworzyć komórkę, w której nic nie ma? To proste.
Definiujesz komórkę za pomocą elementów lub | i nic nie umieszczasz we-
wnÄ…trz:
Niektóre przeglądarki wyświetlają puste komórki tego rodzaju w taki sposób, jakby
w ogóle nie istniały. Jeśli chcesz zmusić przeglądarkę, by naprawdę wyświetliła pustą
komórkę, możesz w definicji komórki umieścić samo złamanie wiersza.
Rysunek 11.3 przedstawia oba rodzaje pustych komórek: puste komórki oraz naprawdę
puste komórki zawierające złamanie wiersza.
Rozdział 11. Tabele 291
Rysunek 11.3.
Puste i naprawdÄ™ puste
komórki
Podpisy
Podpisy tabeli informujÄ… czytelnika o tym, czego dotyczy tabela. Do tworzenia podpi-
sów służy element zaprojektowany specjalnie w tym celu. Wyświetla on
tytuł tabeli w formie podpisu. Chociaż mógłbyś zastosować zwykły akapit lub nagłó-
wek jako etykietę tabeli, istnieje przecież element służący właśnie do tego
celu. Ponieważ elementy nadają podpisom etykiety podpisów, narzędzia
obróbki plików HTML mogą wybrać je i utworzyć z nich osobny plik, automatycznie je
ponumerować lub potraktować w specjalny sposób tylko dlatego, że są podpisami.
A jeżeli nie chcesz podpisywać tabeli? To nie musisz podpisy są opcjonalne. Jeśli
potrzebna Ci tylko tabela, nie przejmuj siÄ™ podpisem i nie wprowadzaj go.
Element umieszczany jest obrębie elementu , przed definicjami
wierszy i zawiera tytuł tabeli. Kończy się zamykającym znacznikiem .
Podstawowa statystyka
Ćwiczenie 11.1: Utwórz prostą tabelę
Poznałeś podstawy tworzenia tabeli, spróbuj więc zastosować je w praktyce. W tym
przykładzie utworzymy tabelę, informującą o tym, jakie kolory uzyskasz, mieszając trzy
podstawowe składniki.
Rysunek 11.4 prezentuje tabelę, której tworzeniem będziemy się zajmowali w tym
przykładzie.
Oto przydatna podpowiedz ułatwiająca tworzenie tabel: ponieważ w HTML-u tabela
definiowana jest wiersz po wierszu, czasami trudno jest śledzić układ kolumn, szcze-
gólnie w przypadku tabel o skomplikowanej konstrukcji.
292 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.4.
Prosta tabela kolorów
Zanim rozpoczniesz wprowadzanie rzeczywistego kodu HTML, naszkicuj sobie swojÄ…
tabelę, abyś miał przed oczyma nagłówki i wartości każdej z komórek. Najlepiej sko-
rzystać z edytora tekstu wyposażonego w edytor tabel (takiego jak Microsoft Word) lub
arkusza kalkulacyjnego. Widząc układ tabeli i wartości komórek, możesz zacząć pisać
kod HTML tabeli.
Rozpocznijmy od najprostszej możliwej konstrukcji strony HTML zawierającej tabelę.
Ten plik HTML, jak i wszystkie inne, możesz przygotować w dowolnym edytorze tekstu:
Kolory
& tutaj dodaj wiersze i kolumny tabeli &
Wprowadz teraz, między otwierającym znacznikiem a znacznikiem zamyka-
jÄ…cym , kolejne wiersze (jest to miejsce wskazane przez napis & tutaj
dodaj wiersze i kolumny tabeli & ). Pierwszy wiersz zbudowany jest z trzech
komórek nagłówka umieszczonego wzdłuż górnej krawędzi tabeli. Wiersz ten wskazy-
wany jest przez znacznik , a jego komórki przez znaczniki :
|
Czerwony |
Żółty | Niebieski |
Możesz sformatować kod HTML w dowolny sposób. Tak, jak w przypadku wszystkich
innych kodów HTML, przeglądarka ignoruje nadmiarowe spacje i naciśnięcia klawisza Enter.
Ja preferuję taką właśnie postać zawartość poszczególnych wierszy wcięta, a znaczniki
komórek w osobnych liniach, abym łatwo mogła rozróżniać wiersze i kolumny.
Rozdział 11. Tabele 293
Dodaj teraz drugi wiersz. Pierwsza komórka drugiego wiersza to nagłówek Czerwony,
który ma być umieszczony z lewej strony tabeli, będzie to więc pierwsza komórka
w tym wierszu, a po niej pojawią się komórki danych:
Czerwony |
Czerwony |
Pomarańczowy |
Purpurowy |
Dodaj kolejne dwa wiersze z nagłówkami Żółty i Niebieski. Oto, jak w tej chwili wy-
glÄ…da kod naszej tabeli:
Czerwony |
Żółty |
Niebieski |
Czerwony |
Czerwony |
Pomarańczowy |
Purpurowy |
Żółty |
Pomarańczowy |
Żółty |
Zielony |
Niebieski |
Purpurowy |
Zielony |
Niebieski |
Na koniec dodaj prosty podpis. Znacznik powinien pojawić się zaraz po
znaczniku a przed pierwszym znacznikiem :
Tabela 1.1: Mieszanie kolorów
Teraz, gdy pierwsza odsłona kodu jest gotowa, przetestuj plik HTML w swojej ulubio-
nej przeglądarce, która obsługuje tabele. Na rysunku 11.5 pokazany jest wygląd naszej
tabeli w przeglÄ…darce Internet Explorer.
Och! Co się stało z tym górnym wierszem nagłówka? Wszystko jest pomieszane.
Oczywiście przyczyną kłopotu jest pusta komórka, którą należało wprowadzić na po-
czątku pierwszego wiersza, aby przesunąć komórki nagłówka nad właściwe kolumny.
HTML nie jest na tyle sprytny, by pamiętać o tym za Ciebie (to jest ten rodzaj błędu,
który najczęściej znajdziesz, testując swoje tabele po raz pierwszy).
294 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.5.
Tabela
mieszania kolorów
Dodajmy więc w pierwszym wierszu pustą komórkę nagłówka (jest to linia
| ):
|
Czerwony |
Żółty |
Niebieski |
Zastosowałem tutaj znacznik , ale równie dobrze mógłby to być znacznik | . Ponie-
waż komórka jest pusta, sposób jej formatowania nie ma znaczenia.
Jeśli ponownie wyświetlisz tabelę w przeglądarce, rezultat powinien być zadowalający,
kolumny powinny mieć odpowiednie nagłówki.
Określanie wielkości tabel,
obramowań oraz komórek
Poznałeś już podstawowe informacje dotyczące tworzenia tabel, nadszedł zatem czas,
abyś przyjrzał się atrybutom, które mogą modyfikować ogólny wygląd tabeli. Atrybuty
przedstawione w tej części rozdziału określają szerokość tabeli oraz jej komórek, odstę-
py pomiędzy brzegami komórek a ich zawartością, odległości między poszczególnymi
wierszami i kolumnami tabeli oraz szerokość jej obramowań.
Określanie szerokości tabeli
Powróćmy do ostatniego przykładu, w nim za określenie szerokości przedstawionej ta-
beli oraz jej poszczególnych kolumn odpowiada przeglądarka. W wielu przypadkach to
najlepsze rozwiązanie, gwarantujące, że tabela zostanie poprawnie wyświetlona w róż-
nych przeglądarkach, działających w różnej rozdzielczości. Po prostu, niech wszystkie
szerokości określi przeglądarka.
Rozdział 11. Tabele 295
Mogą się jednak zdarzyć sytuacje, w których będziesz wolał dysponować większa kon-
trolą szerokości tabeli. W szczególności dotyczy to sytuacji, gdy domyślne ustawienia
przeglądarki są wyjątkowo dziwne. W tym podrozdziale dowiesz się, jak można okre-
ślać szerokość tabeli.
Za pomocą atrybutu WIDTH znacznika można zdefiniować szerokość tabeli na
stronie. Wartością atrybutu jest dokładna szerokość w pikselach lub w procentach
względem szerokości okna (np. 50% bądz 75%). W tym drugim przypadku szerokość
tabeli będzie się zmieniała wraz ze zmianą szerokości okna. Jeśli atrybut ten jest stoso-
wany, szerokość kolumn tabeli zostanie dopasowana do narzuconej szerokości.
Aby tabela zajęła 100% szerokości okna przeglądarki, należy dodać do znacznika
atrybut WIDTH o następującej postaci. Wyniki tego kodu zostały przedsta-
wione na rysunku 11.6.
Rysunek 11.6.
Tabela
o określonej szerokości
w przeglÄ…darce Internet
Explorer
Czasami narzucenie zbyt małej szerokości kolumny może być niemożliwe z powodu danych,
które ona zawiera. W takim przypadku Netscape próbuje tak dopasować szerokość kolumny,
by była najbliższa narzuconej przez Ciebie wartości.
Definiując szerokość tabeli, zawsze lepiej rób to w procentach, nie w pikselach. Ponie-
waż nie wiesz, z jakiej szerokości okna korzysta Twój czytelnik, ustawienie szerokości
w procentach umożliwia dopasowanie do okna o dowolnej szerokości. Jeśli podajesz
szerokość w pikselach, musisz się liczyć także i z taką możliwością, że tabela ucieknie
poza ekran.
Zmiana obramowań tabeli
Najczęściej używanym atrybutem znacznika jest atrybut BORDER. Jest on
umie-szczany bezpośrednio wewnątrz tego znacznika. Określa on czy wokół tabeli mają
być wyświetlane obramowania, a jeśli tak, to jakiej szerokości.
296 Część 4. Arkusze stylów, tabele i ramki
Od momentu wprowadzenia do języka HTML atrybut ten był kilkukrotnie modyfikowany:
w HTML-u 2.0 można było użyć znacznika o postaci , który
powodował, że wokół tabeli były wyświetlane obramowania. W graficznych
przeglądarkach obramowanie tabeli mogło być wyświetlane w wymyślny sposób,
natomiast w przeglądarkach tekstowych, jako seria minusów i pionowych kresek (|);
począwszy od HTML-a 3.2, zmienił się prawidłowy sposób zastosowania atrybutu
BORDER, zaczął on oznaczać szerokość obramowania tabeli wyrażoną w pikselach.
Znacznik o postaci definiuje tabelÄ™ o obramowaniu
szerokości jednego piksela, znacznik , tabelę o
obramowaniu szerokości dwóch pikseli, i tak dalej. Przeglądarki zgodne z wersją 3.2
języka HTML powinny wyświetlać wcześniejszą składnię znacznika tabeli BORDER>, jako tabelę z ramką o szerokości jednego piksela (czyli tak samo, jak
gdyby został użyty znacznik ;
aby stworzyć tabelę, której obramowanie nie ma szerokości i jest niewidoczne,
należy użyć znacznika . Takie tabele bez obramowań są
przydatne przy określaniu struktury strony. W sytuacjach, gdy atrybut BORDER
zostanie pominięty, przeglądarki zgodne z wersją 3.2 (oraz kolejnymi) języka
HTML, powinny wyświetlać tabelę bez ramek (podobnie jak w przypadku
użycia ).
Istnieje możliwość określania szerokości obramowania wyświetlanego wokół tabeli. Jeśli
atrybut BORDER ma wartość liczbową, to obramowanie tabeli będzie miało podaną szero-
kość (w pikselach). Domyślnie obramowanie ma szerokość jednego piksela (BOR-
DER="1"). Jeśli atrybutowi BORDER zostanie przypisana wartość 0 (BORDER="0"), to ob-
ramowanie nie zostanie wyświetlone (podobnie jak w przypadku gdy atrybut ten zostanie
pominięty).
Na rysunku 11.7 została przedstawiona tabela z obramowaniem o szerokości 10 pikseli.
Definicja tej tabeli oraz jej obramowania ma następującą postać:
Rysunek 11.7.
Szerokość obramowania
tabeli
Rozdział 11. Tabele 297
Odstępy między zawartością komórki
a jej obramowaniem
W HTML-u istnieje atrybut definiujący wielkość odstępu pomiędzy obramowaniem
komórki tabeli a jej zawartością. W wielu przeglądarkach wielkość ta domyślnie wynosi
1 piksel. Za pomocą atrybutu CELLPADDING znacznika można zmieniać wiel-
kość tego odstępu. Wartość tego atrybutu określa wielkość odstępu pomiędzy
obramowaniem komórki a jej zawartością wyrażoną w pikselach.
Poniżej przedstawiłam zmodyfikowany kod znacznika , w którym odstęp po-
między zawartością komórki a jej obramowaniem, został powiększony do 10 pikseli.
Wyniki tej modyfikacji możesz zobaczyć na rysunku 11.8.
Rysunek 11.8.
Odstęp pomiędzy
zawartością komórki
a jej obramowaniem
Wypełnienie powiększa
odstęp pomiędzy
zawartością komórki a jej
obramowaniem
Jeśli przyjęto ustawienie CELLPADDING="0", zawartość komórki będzie stykała się z
krawędziami komórki (nie wygląda to zbyt dobrze).
Odstępy między komórkami
Odstępy między komórkami pod wieloma względami przypominają odstępy między
tekstem a krawędzią komórki. Jedyna różnica polega na tym, że odstępy między ko-
mórkami, jako limitujące wolną przestrzeń oddzielającą komórki, pozwalają na określe-
nie szerokości obramowań poszczególnych komórek. Atrybutem umożliwiającym defi-
niowanie tych szerokości jest CELLSPACING znacznika . Domyślną wartością
tego atrybutu jest 2.
Wprowadzone w ten sposób obramowania wokół komórek tworzą również obrys całej
tabeli, który nakłada się na obramowanie tejże, ustawione za pomocą atrybutu BORDER.
298 Część 4. Arkusze stylów, tabele i ramki
Poeksperymentuj, a zobaczysz różnicę, na przykład, na rysunku 11.9 pokazana jest ta-
bela, dla której szerokość obramowań komórek wynosi 8 pikseli, a obramowania całej
tabeli, 4 piksele.
Rysunek 11.9.
Odstępy
między komórkami (oraz
szerokość obramowania
tabeli)
Atrybut CELLSPACING
określa odległość
pomiędzy
komórkami tabeli
Szerokość kolumn
Atrybut WIDTH można zastosować także do poszczególnych komórek ( lub | ),
aby za jego pomocą określić szerokość konkretnych kolumn. Podobnie jak w przypadku
szerokości tabeli przedstawionej we wcześniejszej części rozdziału, wartością atrybutu
jest dokładna szerokość kolumny w pikselach lub w procentach względem szerokości
całej tabeli. W tym drugim przypadku szerokość tabeli będzie się zmieniała wraz ze
zmianą szerokości okna. Tutaj także zalecane jest korzystanie z wartości procentowej,
aby tabela była poprawnie wyświetlana niezależnie od szerokości okna.
Możliwość definiowania szerokości kolumn może być przydatna, gdy chcesz, by
wszystkie kolumny Twojej tabeli miały identyczną szerokość niezależnie od ich zawar-
tości (możliwość ta jest przydatna, na przykład, w niektórych formach układu stron).
Rysunek 11.10 przedstawia oryginalnÄ… tabelÄ™ z rysunku 11.1. Tym razem, tabela zajmu-
je jednak 100% szerokości okna przeglądarki. Pierwsza kolumna tabeli zajmuje 40% jej
całkowitej szerokości, a pozostała trzy kolumny po 20%.
Aby stworzyć taką tabelę, szerokości kolumn zostają podane w komórkach nagłówka,
tak jak pokazałam na poniższym przykładzie:
Podstawowa statystyka
ImiÄ™ |
Rozdział 11. Tabele 299
Wzrost |
Waga |
Kolor oczu |
Rysunek 11.10.
Szerokości kolumn
A co się stanie, jeśli stworzysz tabelę o szerokości 80% szerokości strony, zawierającą
te same komórki nagłówka, co tabela przedstawiona w poprzednim przykładzie (czyli
o szerokości 40%, 20%, 20% i 20%)? Zmodyfikuj nieznacznie poprzednią tabelę, okre-
ślając jej szerokość jako 80%, jak pokazałam na poniższym przykładzie. Gdy wyświe-
tlisz nową tabelę w przeglądarce okaże się, że zajmuje ona 80% szerokości strony. Po-
szczególne kolumny wciąż zajmują odpowiednio 40%, 20%, 20% i 20% szerokości
tabeli. Dla zachowania ścisłości, kolumny zajmują teraz 32%, 16%, 16% i 16% szero-
kości całej strony.
Podstawowa statystyka
ImiÄ™ |
Wzrost |
Waga |
Kolor oczu |
Wprowadzanie złamań wiersza
Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań
wiersza (znaczniki
). Aamania wiersza są szczególnie użyteczne w przypadku
tabel, w których większość komórek ma niewielkie rozmiary, a jedynie dwie czy trzy
zawierają dłuższe teksty. Dopóki szerokość ekranu jest wystarczająca, przeglądarka po
prostu poszerza kolumny i wydłuża wiersze, co wygląda niekiedy dziwnie. Na przykład,
ostatni wiersz tabeli przedstawionej na rysunku 11.11 został zdefiniowany w
następujący sposób:
TC |
7 |
Podejrzliwy za wyjątkiem chwil gdy jest głodny |
300 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.11.
Tabela, której
jeden wiersz
jest wyjątkowo długi
Wstawiając znaczniki łamania wiersza, możesz zmieścić tekst w węższej kolumnie,
dzięki czemu tabela będzie wyglądała, jak na rysunku 11.12. Poniżej przedstawiłam
zmodyfikowany kod ostatniego wiersza tej tabeli:
TC |
7 |
Podejrzliwy za
wyjÄ…tkiem chwil
gdy jest głodny |
Rysunek 11.12.
KorzystajÄ…c ze znacznika
, można zawinąć
długi teks
Za długi wiersz
został zwinięty
Możliwa jest także sytuacja odwrotna, to znaczy taka, w której zawartość komórki jest
zawijana, a nie powinna (jest to ważne, szczególnie w przypadku elementów formularza
zawartych w komórce tabeli, na przykład, chcesz, by etykieta i pole danych wejścio-
wych nie były rozdzielane). W takim wypadku możesz dodać atrybut NOWRAP do znacz-
nika lub | . Przeglądarka nie będzie wówczas rozdzielała takich danych i wy-
świetli je w jednym wierszu. Pamiętaj, że zawsze możesz ręcznie dodać znaczniki
/>, by wprowadzić łamanie wiersza dokładnie tam, gdzie sobie tego życzysz.
W HTML-u 4.0 atrybut NOWRAP stał się przestarzały i został zastąpiony przez właściwości
arkuszy stylów.
Rozdział 11. Tabele 301
Modyfikacje wyglÄ…du tabeli za pomocÄ… znacznika
i atrybutu NOWRAP wymagajÄ…
jednak ostrożności. Pamiętaj, że tabela będzie oglądana w oknach o różnych szeroko-
ściach. Spróbuj zmienić wielkość okna przeglądarki, w której wyświetliłeś stronę
i przekonaj się, czy pomimo zmian szerokości tabeli sposób sformatowania jej zawarto-
ści pozostanie taki sam. W większości przypadków powinieneś spróbować pozostawić
przeglądarce zadanie sformatowania zawartości tabeli i tylko w razie konieczności
wprowadzać w nim drobne modyfikacje.
Kolor i wyrównanie tabeli oraz komórek
Kiedy już stworzysz podstawowy układ tabeli, z jej wierszami, nagłówkami i zawarto-
ścią, możesz rozpocząć poprawianie jej wyglądu. Można to zrobić na kilka sposobów.
Jedną z metod poprawiania i uatrakcyjniania wyglądu tabel jest określanie koloru jej
obramowań i komórek.
Modyfikacja koloru tła tabel i komórek
Aby zmienić tło tabeli, wiersza lub komórki wiersza, do znacznika , ,
lub | dodawany jest atrybut BGCOLOR. Podobnie jak w przypadku znacznika
, wartością atrybutu BGCOLOR jest określająca kolor liczba szesnastkowa lub
jedna z szesnastu nazw kolorów (ta możliwość istnieje w wielu przeglądarkach, w tym
w Internet Explorerze i Netscape Navigatorze). Dopuszczalne nazwy kolorów to: black
(czarny), silver (srebrny), gray (szary), white (biały), maroon (kasztanowy), red (czer-
wony), purple (ciemna purpura), fuchsia (jasna purpura), green (zielony), lime (cytry-
nowy), olive (oliwkowy), yellow (żółty), navy (granatowy), blue (niebieski), teal (ciem-
ny turkus) i aqua (bladoniebieski). Atrybut BGCOLOR stał się częścią specyfikacji
HTML 4.0, jednak został uznany za przestarzały i należy go zastępować arkuszami sty-
lów.
Ustawienia dotyczące koloru tła dominują nad ustawieniami koloru tła elementu nadrzęd-
nego. Oznacza to, że ustawienia koloru tła tabeli dominują nad ustawieniami tła strony,
ustawienia koloru wiersza dominują nad ustawieniami koloru tła tabeli, a ustawienia doty-
czące koloru komórki nad wszelkimi innymi. W przypadku tabel zagnieżdżanych w ko-
mórkach, kolor tła zagnieżdżonej tabeli będzie identyczny z kolorem tła mieszczącej ją
komórki.
Pamiętaj także, by wraz ze zmianą koloru tła komórki zmienić kolor zawartego w niej
tekstu, aby komórka była czytelna. Jeśli chcesz, aby Twoje strony były zgodne z wer-
sjami przeglądarek wcześniejszymi niż Internet Explorer 4.0 oraz Netscape Navigator
4.0, to powinieneś użyć znacznika . W przypadku przeglądarek ob-
sługujących kaskadowe arkusze stylów, takich jak Internet Explorer 4.0 (lub wersja
pózniejsza) oraz Netscape Navigator 4.0 (lub wersja pózniejsze), można wykorzystać
właściwość color CSS.
302 Część 4. Arkusze stylów, tabele i ramki
Aby kolor komórki został wyświetlony, musi ona coś zawierać, może to być jedynie znacznik
.
Zajmiemy się teraz przykładem, który pozwoli nam przećwiczyć zmianę koloru tła całej
tabeli i komórek. Oto szachownica, która powstała w oparciu o tabelę HTML. Sama ta-
bela ma białe tło, a poszczególne komórki czarne. Warcaby, na rysunku czerwone
i czarne kółka, to obrazy.
Jeśli chodzi o umieszczanie obrazów w tabelach, to ogólnie rzecz biorąc, odstępy
umieszczane w oryginalnym kodzie HTML nie mają wpływu na ostateczny wygląd strony.
Istnieje jednak jedno odstępstwo od tej reguły; dotyczy ono przeglądarki Netscape Navigator
i jest związane z umieszczaniem obrazów wewnątrz komórek tabel. Załóżmy, że zapisałeś
kod komórki tabeli zawierającej znacznik ![]() w następujący sposób:
|
|
W tym przypadku, znak przejścia do nowego wiersza umieszczony pomiędzy znacznikami
i ![]() ma znaczenie. Powoduje on, że obraz nie zostanie poprawnie umieszczony
wewnątrz tabeli (jest to szczególnie zauważalne w komórkach, których zawartość jest
wyśrodkowana). To dziwne zachowanie przeglądarek firmy Netscape dotyczy także
najnowszej wersji Netscape Navigatora. Problem można jednak rozwiązać bardzo łatwo,
wystarczy umieścić znaczniki | oraz ![]() w tej samej linii:
| |
Zasadę przedstawioną w ostatniej notatce wykorzystałam w poniższym przykładzie.
Wygląd tego fragmentu kodu, wyświetlonego w przeglądarce Internet Explorer przed-
stawiłam na rysunku 11.13.
Szachownica
Rysunek 11.13.
Kolory komórek tabeli
Zmiana koloru obramowań tabeli
Internet Explorer dostarcza także atrybutów, które umożliwiają zmianę kolorów obramowań
elementów tabeli. Są to atrybuty: BORDERCOLOR, BORDERCOLORLIGHT i BORDERCOLOR-
DARK. Jako wartość mogą przyjmować określającą kolor liczbę szesnastkową lub jedną
z szesnastu nazw kolorów. Atrybuty te można stosować w znacznikach ,
oraz | . Tak, jak w przypadku kolorów tła, ustawienia kolorów obramowań dominu-
ją nad ustawieniami poczynionymi dla elementu nadrzędnego. We wszystkich wypad-
kach, użycie któregoś z wymienionych wyżej atrybutów wymaga umieszczenia
w znaczniku atrybutu BORDER.
Te rozszerzenia są na razie obsługiwane wyłącznie przez przeglądarkę Internet Explorer,
z wyjątkiem atrybutu BORDERCOLOR, z którym radzi sobie także Netscape Navigator
4.0. Wszystkie te atrybuty zostały uznane za przestarzałe i należy je zastępować arku-
szami stylów:
BORDERCOLOR określa kolor obramowania, dezaktywując wygląd trójwymiarowego
domyślnego obramowania,
BORDERCOLORLIGHT ustala kolor rozjaśnienia trójwymiarowego obramowania,
w którym zostanie wyświetlona lewa i górna krawędz obramowania tabeli,
BORDERCOLORDARK ustala kolor cienia trójwymiarowego obramowania, w którym
zostanie wyświetlona prawa i dolna krawędz obramowania tabeli.
Na rysunku 11.14 przedstawiłam przykład tabeli o obramowaniu szerokości 10 pikseli.
Aby zademonstrować działanie atrybutów dostępnych w przeglądarce Internet Explorer,
użyłam atrybutów BORDERCOLORDARK oraz BORDERCOLORLIGHT, dzięki którym gru-
304 Część 4. Arkusze stylów, tabele i ramki
bemu obramowaniu tabeli nadałam przestrzenny wygląd. Pierwsza linia kodu została
zmieniona w następujący sposób:
bgcolor="#ffffff" width="50%">
Rysunek 11.14.
Kolory
obramowań tabeli
Obramowanie
tabeli
Kolor cienia
Kolor rozjaśnienia
trójwymiarowego
trójwymiarowego
obramowania
obramowania tabeli
tabeli
Ta linia kodu stała się dosyć długa, nieprawdaż? Być może będziesz mógł ją łatwiej
przeanalizować, jeśli zapiszesz każdy atrybut w osobnej linii, tak jak pokazałam na po-
niższym przykładzie. Przykład wciąż działa w identyczny sposób. Pamiętaj jednak, że
zamykający nawias trójkątny (>) musi się pojawić wyłącznie po ostatnim atrybucie
znacznika.
bordercolorlight="Red"
bordercolordark="Black"
bgcolor="#ffffff"
width="50%">
Określanie wyrównania zawartości tabel
Inną metodą poprawienia wyglądu tabeli jest zmodyfikowanie sposobu wyrównania jej
zawartości. Atrybut ALIGN określa wyrównanie zawartości tabeli w poziomie, a atrybut
VALIGN, w pionie. Oba te atrybuty zostały wprowadzone w HTML-u 3.2, jednak
w HTML-u 4.0 zostały uznane za przestarzałe. W tej części rozdziału dowiesz się, w ja-
ki sposób można używać tych atrybutów.
Wyrównywanie tabeli
Domyślnie tabela wyrównywana jest do lewej krawędzi strony, a tekst umieszczany jest
nad i pod nią. Za pomocą atrybutu ALIGN możliwe jest wyrównywanie tabel względem
dowolnego marginesu oraz otaczanie ich tekstem, podobnie jak w przypadku obrazów.
Rozdział 11. Tabele 305
Ustawienie ALIGN="LEFT" powoduje wyrównanie tabeli względem lewego marginesu,
a towarzyszący jej tekst jest umieszczany między prawą krawędzią strony a tabeli.
Ustawienie ALIGN="RIGHT" działa podobnie, z tym, że tabela jest wyrównywana do
prawego marginesu.
W przykładzie przedstawionym na rysunku 11.15, tabela o szerokości wynoszącej 70%
całkowitej szerokości strony, została wyrównana do lewego brzegu strony. Oto postać
znacznika definiujÄ…cego tÄ™ tabelÄ™:
Rysunek 11.15.
Tabela otoczona tekstem
Rezygnacja z otaczania tekstem realizowana jest w taki sam sposób, jak dla obrazów, za
pomocą znacznika złamania wiersza, zawierającego atrybut CLEAR.
Wyrównywanie tabel względem obu marginesów to zadanie nieco trudniejsze. Przed
pojawieniem się programów Internet Explorer 4.0 i Netscape Navigator 4 przeglądarki
nie obsługiwały ustawienia ALIGN="CENTER" dla tabel. Aby uzyskać efekt wycentro-
wania tabeli na stronie, mogłeś stosować znaczniki lub GN="CENTER"> (oba poznałeś w rozdziale 6. Więcej o formatowaniu tekstu w HTML- u ). Teraz jednak obie najnowsze wersje przeglądarek obsługują poprawnie znacznik BLE ALIGN="CENTER">. Jednak, podobnie jak wszystkie atrybuty formatujące w HTML-
u 4.0, także atrybut ALIGN został uznany za przestarzały i należy go zastępować arkusza-
mi stylów.
Wyrównanie zawartości komórki
Gdy wiersze i komórki tabeli są już na swoim miejscu, a sama tabela jest odpowiednio
wyrównana na stronie, możesz przystąpić do wyrównania zawartości poszczególnych
komórek, by w możliwie najlepszy sposób zaprezentować zawartość tabeli. Dostępnych
jest kilka opcji pozwalających wyrównywać dane w pionie i w poziomie. Na rysun-
306 Część 4. Arkusze stylów, tabele i ramki
ku 11.16 pokazana jest tabela (jest to prawdziwa tabela HTML!), w której zastosowano
najróżniejsze sposoby wyrównywania zawartości komórek.
Sposób wyrównania zawartości komórki w poziomie określony jest wartością atrybutu
ALIGN. Możliwe są następujące wartości: LEFT (wyrównanie do lewego marginesu),
RIGHT (do prawego marginesu) i CENTER (wycentrowane względem obu margine-
sów).
Rysunek 11.16.
Sposoby wyrównania
zawartości komórek
w pionie i poziomie
Sposób wyrównania zawartości komórki w pionie określony jest wartością atrybutu VALI-
GN. Przyjmuje on takie oto wartości: TOP (dosunięcie do górnego marginesu), BOTTOM (do
dolnego marginesu) i MIDDLE (wycentrowanie względem obu marginesów). W Netscape
Navigatorze atrybutowi temu można także przypisać wartość VALIGN="BASELINE", któ-
ra w zasadzie jest równoważna ustawieniu VALIGN="TOP". Jedyna różnica polega na
tym, że zawartość wyrównywana jest względem pierwszego wiersza każdej komórki (w
zależności od zawartości komórki efekt może, ale nie musi, być taki sam, jak
w przypadku ustawienia VALIGN="TOP").
Domyślnie zawartość komórek nagłówka jest centrowana w poziomie i pionie, nato-
miast w przypadku komórek danych, zawartość jest centrowana w pionie, a w poziomie
wyrównana do lewego marginesu.
Za pomocą atrybutów ALIGN i VALIGN znacznika możesz narzucać własne usta-
wienia dla całego wiersza, które będą dominować nad ustawieniami domyślnymi. Oto
przykład:
Rozdział 11. Tabele 307
Podobnie, poprzez dodanie atrybutu ALIGN do znacznika lub | , możesz defi-
niować własny sposób wyrównania dla poszczególnych komórek:
|
14 |
16 |
Brak danych |
15 |
Poniższy kod zródłowy przedstawia różne sposoby wyrównywania zawartości komórek.
Rezultaty zaprezentowane sÄ… na rysunku 11.17.
Wyrównywanie zawartości komórek
|
Do lewej |
Do środka |
Do prawej |
Do góry |
 |
|
|
Na środku |
|
|
|
Do dołu |
|
|
|
308 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.17.
Opcje wyrównania
Wyrównywanie tytułu
Opcjonalny atrybut ALIGN znacznika określa sposób wyrównania tekstu
podpisu. W zależności od stosowanej przeglądarki, wartości tego atrybutu mogą być
różne.
W większości przeglądarek dostępne są dwie wartości: TOP i BOTTOM. Wykorzystanie
tych wartości stanowi poprawny sposób użycia atrybutu ALIGN zgodny ze specyfikacją
HTML . Domyślnie podpis umieszczany jest u góry tabeli (ALIGN="TOP"). Jeśli
chcesz, by podpis znalazł się pod tabelą, przypisz atrybutowi ALIGN wartość BOTTOM.
Oto przykład odpowiedniego kodu:
Limity obrotów dla różnych owoców
W przeglÄ…darce Internet Explorer podpisy definiuje siÄ™ jednak inaczej. Do dyspozycji
masz tu atrybut VALIGN, za pomocą którego możesz umieszczać podpis pod lub nad ta-
belą oraz atrybut ALIGN, który przyjmuje wartości LEFT, RIGHT i CENTER, a służy do
wyrównania podpisu w poziomie.
Aby podobne rezultaty uzyskać w przeglądarce Netscape Navigator, musisz zastosować
ALIGN="BOTTOM" lub ALIGN="TOP", a następnie skorzystać z elementu , i za pomocą jego własnego atrybutu ALIGN wyrównać tekst podpisu względem któregoś z marginesów lub wyśrodkować go. Ta metoda działa także w programie Internet Explo- rer 4. Jeśli chcesz umieścić pod tabelą podpis wyrównany do prawego marginesu, w wersji dla przeglądarki Internet Explorer musisz wprowadzić taki kod: To jest podpis Aby uzyskać żądany rezultat nie tylko w Internet Explorerze, ale także w przeglądarce Netscape Navigator, możesz zastosować element : To jest podpis
Rozdział 11. Tabele 309 W zasadzie, jeśli Twoje tabele nie są bardzo krótkie, powinieneś pozostawić podpis w jego domyślnym ulokowaniu, to znaczy wyśrodkowany u góry tabeli, aby czytelnicy najpierw zobaczyli podpis tabeli i zapoznali się z jej tematyką. Jeśli pojawi się on pod tabelą, czytelnicy będą musieli najpierw przeczytać tabelę, zanim zobaczą jej podpis, a wówczas nie będzie on już potrzebny, bo sami zorientują się, co przedstawia tabela. Komórki rozpięte na kilku wierszach lub kolumnach W dotychczas tworzonych przez nas tabelach, na jedną komórkę przypadała jedna war- tość, ewentualnie była to komórka pusta. Można również utworzyć takie komórki, które rozpięte są na wielu wierszach lub kolumnach tabeli. Takie komórki najczęściej zawie- rają nagłówki dzielące się w kolejnych wierszach lub kolumnach na sekcje. Mogą one także posłużyć do urozmaicania układu tabeli. Rysunek 11.18 pokazuje tabelę zawiera- jącą komórki rozpięte na kilku wierszach i (lub) kolumnach. Rysunek 11.18. Tabela, której komórki rozpięte są na kilku wierszach i (lub) kolumnach Komórka zawierająca dwa wiersze i dwie kolumny Komórka zawierająca Komórka zawierająca dwa wiersze dwie kolumny Aby stworzyć komórkę rozpiętą na kilku wierszach i (lub) kolumnach, należy do znacz- nika lub | dodać atrybuty ROWSPAN i/lub COLSPAN oraz przypisać im odpo-
wiednie wartości, które określą liczbę wierszy i (lub) kolumn, na których komórka jest
rozpięta. Dane umieszczone w takiej komórce wypełnią obszar o długości i (lub) szero-
kości odpowiadającej rozpiętości, jak w poniższym przykładzie:
Rozpinanie komórek na wiersze i kolumny
Płeć |
Mężczyzna |
Kobieta |
310 Część 4. Arkusze stylów, tabele i ramki
15 |
23 |
Taka tabela mogłaby wyglądać tak, jak tabela z rysunku 11.19.
Rysunek 11.19.
Komórka rozpięta
na kolumnach
Zwróć uwagę, że w przypadku rozpinania komórki na kilku wierszach i (lub) kolum-
nach, nie ma potrzeby definiowania kolejnych komórek jako pustych, obszar takiej ko-
mórki obejmuje wskazaną liczbę wierszy i (lub) kolumn. Można je zignorować i przejść
do następnej komórki w wierszu.
Komórki rozpinane są w dół i w prawo. Tak więc, aby utworzyć komórkę rozpiętą na
kilku kolumnach, należy dodać atrybut COLSPAN do komórki wysuniętej najbardziej
w lewo, a w przypadku rozpinania komórki na wierszach, atrybut ROWSPAN powinien
być dodany do komórki pierwszej od góry.
Kolejny przykład to kod zródłowy tworzący komórki rozpięte na kilku wierszach (jest
to komórka zawierająca wyraz Tłok). Rezultat pokazany jest na rysunku 11.20.
Luz pierścienia
|
Luz
pierścienia |
TÅ‚ok |
Górny |
3mm |
Dolny |
3.2mm |
Rozdział 11. Tabele 311
Rysunek 11.20.
Komórka rozpięta
na dwóch wierszach
Ćwiczenie 11.2: Tabela specyfikacji serwisowych
Czy masz już dość tabel? Zróbmy jeszcze jeden przykład, w którym wykorzystamy
wszystko, czego zdążyłeś się nauczyć: będzie to tabela z nagłówkami i zwykłymi
komórkami, do której zastosujemy wyrównanie i wprowadzimy komórki rozpięte na
wierszach i komórkach. Jak widzisz będzie ona bardzo skomplikowana, ale proces jej
tworzenia przeanalizujemy krok po kroku.
Rysunek 11.21 prezentuje tabelę zawierającą informacje serwisowe z instrukcji obsługi
samochodu.
Rysunek 11.21.
Bardzo skomplikowana
tabela zawierajÄ…ca
specyfikacje serwisowe
Tabela ma pięć wierszy i pięć kolumn. Widzisz je? Niektóre z nich rozpięte są na in-
nych kolumnach i wierszach. Rysunek 11.22 prezentuje tę samą tabelę, do której wpro-
wadzono obramowania teraz możesz dokładnie zobaczyć jej budowę.
312 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.22.
Pięć kolumn
i pięć wierszy
Wiersz 1
Wiersz 2
Wiersz 3
Wiersz 4
Wiersz 5
Kolumna 1 Kolumna 3 Kolumna 5
Kolumna 2 Kolumna 4
W takiej tabeli jak ta, gdzie utworzono wiele rozpiętych komórek, wyświetlenie obra-
mowań pomaga zobaczyć konstrukcję rozpięć. Pamiętaj, że początkowym punktem
rozpiętej komórki jest jej górna lub lewa krawędz.
Gotowy? Zaczynamy od szkieletu strony, tak jak w przypadku poprzednich przykładów:
Dane serwisowe
Odchylenie pasa napędowego
Aby uatrakcyjnić wygląd tabeli wszystkim jej komórkom przypisz jasnożółty kolor tła
(#ffffcc), posługując się przy tym atrybutem BGCOLOR. Poza tym, zwiększ szerokość
obramowania tabeli do 5 pikseli i przypisz jej ciemnozłoty kolor (#cc9900), wykorzy-
stując w tym celu atrybut BORDERCOLOR działający poprawnie zarówno w Internet
Explorerze, jak i w Netscape Navigatorze. Następnie, zapewnij, aby linie pomiędzy
komórkami tabeli były wyrazniejsze; w tym celu atrybutowi CELLSPACING przypisz
wartość 0 oraz zwiększ ostępy pomiędzy zawartością komórek a jej brzegami, przypisu-
jąc atrybutowi CELLPADDING wartość 5. Nowa definicja tabeli ma następującą postać:
bgcolor="#ffffcc"
bordercolor="#cc9900"
cellspacing="0"
cellpadding="5">
Rozdział 11. Tabele 313
Utwórz teraz pierwszy wiersz. Dzięki wyświetlonym obramowaniom możesz zobaczyć,
że pierwsza komórka jest pusta i rozpięta na dwóch wierszach i dwóch kolumnach (patrz
rysunek 11.23). Odpowiedni kod HTML będzie więc wyglądał w następujący sposób:
|
Rysunek 11.23.
Pierwsza komórka
Pierwsza komórka
(zawiera dwie
kolumny i dwa
wiersze)
Druga komórka wiersza to nagłówek Odchylenie używanego pasa. Jest rozpięta na dwóch
kolumnach. Oto jej kod:
Odchylenie używanego pasa |
W tym wierszu pozostała jeszcze ostania komórka, podobnie jak pierwsza, jest ona roz-
pięta na dwóch wierszach:
Ustawienia odchylenia nowego pasa |
Przejdzmy teraz do drugiego wiersza. Nie jest nim wiersz, którego nagłówek brzmi
Alternator. Jak sobie przypominasz, pierwsza komórka poprzedniego wiersza jest roz-
pięta na dwóch kolumnach i dwóch wierszach. Oznacza to, że pierwsza komórka dru-
giego wiersza jest wbudowana w rozpiętą komórkę. Nie musisz jej ponownie definio-
wać, przechodzisz po prostu do następnej wskazanej przez obramowania. Jest nią
komórka nagłówka Limit, a po niej następuje komórka Dopasowanie odchylenia:
Limit |
Dopasowanie odchylenia |
A co z ostatnią komórką? Podobnie jak pierwsza, ta również jest wbudowana w komór-
kę rozpiętą na dwóch wierszach i kolumnach. Tak więc, jedyne wielkości konieczne
w tym wierszu zostały już zdefiniowane.
Czy wszystko jest na razie jasne? Czas byś spróbował podglądnąć swoją tabelę w prze-
glądarce, by sprawdzić jej układ. Na razie wygląda ona nieco śmiesznie, bowiem lewa
strona jest całkowicie pusta, ale nie przejmuj się. Rysunek 11.24 pokazuje aktualny stan
naszych działań.
314 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.24.
Oto poczÄ…tki
naszej tabeli
Następny wiersz! Jeśli to konieczne, rzuć okiem na obramowania. Pierwszą komórką
tego wiersza jest komórka nagłówka, o zawartości Alternator, która jest rozpięta na tym
wierszu i następnym. Czy wiesz już o co tu chodzi?
Alternator |
Następne trzy komórki to łatwizna, bowiem nie są one rozpięte. Oto ich definicje:
Bez AC |
10 mm |
5-7 mm |
Ostatnia komórka jest taka sama jak pierwsza:
5-7 mm |
Przechodzimy do wiersza czwartego. Ze względu na obecność atrybutu ROWSPAN w de-
finicji poprzedniego wiersza, są w nim jedynie trzy komórki: jedna zawierająca napis
Modele z AC oraz dwie z liczbami:
AC |
12 mm |
6-8 mm |
W tej tabeli komórka Alternator jest komórką nagłówka, a komórki zawierające tekst Modele
z AC i Modele bez AC są komórkami danych. U podstaw mojej decyzji takiego, a nie innego
sposobu sformatowania leżały wyłącznie względy natury estetycznej. Nic nie stało na prze-
szkodzie, by wszystkie komórki były komórkami nagłówka
Oto i ostatni wiersz, nie powinien być trudny. Pierwsza komórka (Elektryczna pompa
olejowa) jest rozpięta na dwóch kolumnach (jednej zawierającej komórkę Alternator
i drugiej, w której znalazły się komórki Modele z AC i Modele bez AC). Pozostałe trzy
komórki są pojedyncze:
Elektryczna pompa olejowa
| 12 mm |
Rozdział 11. Tabele 315
7.9 mm |
6-8 mm |
Oto wszystko. Zakończyłeś pracę nad układem tabeli. Najtrudniejszy etap tworzenia ta-
beli masz za sobą. Teraz pozostały jedynie drobne prace kosmetyczne. Przyjrzyj się ta-
beli raz jeszcze w przeglądarce, by sprawdzić, czy nie ma jakichś większych błędów
(patrz rysunek 11.25).
Rysunek 11.25.
Tabela następny krok
Skoro wiersze i kolumny są już na właściwych miejscach, zajmij się wyrównaniem za-
wartości komórek. Liczby powinny zostać wycentrowane, a ponieważ stanowią one
podstawową zawartość tabeli, zastosujmy centrowanie jako domyślny sposób wyrów-
nania każdego z wierszy:
Możemy jeszcze poprawić wygląd etykiet Alternator, Modele z AC, Modele bez AC oraz
Elektryczna pompa olejowa, wyrównując je do lewego marginesu:
Alternator |
Modele bez AC |
Modele z AC |
Elektryczna pompa olejowa |
Jeszcze parę ostatnich korekt, wprowadziłam łamania wiersza tam, gdzie nagłówki były
za długie, aby zmniejszyć szerokość kolumn. Ponieważ tekst nagłówków nie jest długi,
nie muszę się martwić, że tabela będzie wyglądać śmiesznie, gdy stanie się zbyt wąska.
Oto wiersze, które zmodyfikowałem:
Ustawienia odchylenia
nowego pasa |
Dopasowanie
odchylenia |
I jeszcze ostatnia czynność, wyrównam tytuł tabeli do lewej krawędzi strony:
Odchylenie pasa napędowego
316 Część 4. Arkusze stylów, tabele i ramki
Voilá oto tabela, której elementy sÄ… odpowiednio uÅ‚ożone, a zawartość wyrównana.
Rysunek 11.26 pokazuje efekt końcowy.
Rysunek 11.26.
Tabela: Odchylenie pasa
napędowego
Jeśli w którymkolwiek momencie straciłeś wątek, najlepszym rozwiązaniem jest sięgnąć po
ulubiony edytor tekstu i spróbować samemu, znacznik po znaczniku. Po kilku próbach nie
będzie to dla Ciebie straszne.
Oto pełny kod zródłowy naszej tabeli:
Dane serwisowe
cellspacing="0" cellpadding="5">
Odchylenie pasa napędowego
|
Odchylenie używanego pasa |
Ustawienia odchylenia
nowego pasa |
Limit |
Dopasowanie
odchylenia |
Alternator
| Modele bez AC |
10 mm |
5-7 mm |
5-7 mm |
Modele z AC |
12 mm |
6-8 mm |
Rozdział 11. Tabele 317
Elektryczna pompa olejowa
| 12 mm |
7.9 mm |
6-8 mm |
Bardziej zaawansowane możliwości
ulepszania tabel
Możesz mi wierzyć lub nie, lecz w końcu, po tych wszystkich ćwiczeniach i przykła-
dach, zbliżasz się do momentu poznania elementów tabel wprowadzonych w wersji 4.0
języka HTML. Nowa wersja HTML-a zawiera wiele usprawnień związanych ze sposo-
bem definiowania wierszy i kolumn tabeli; przedstawię je w tej części rozdziału.
Grupowanie i określanie wyrównania kolumn
Jednym z ulepszeń związanych z tworzeniem tabel, jakie wprowadzono w HTML-u 4.0,
jest możliwość wyświetlania tabel w sposób przyrostowy, dzięki czemu tabela może
być wyświetlana częściowo jeszcze zanim zostaną pobrane wszystkie umieszczone
w niej informacje. Po części efekt taki można osiągnąć, definiując kolumny tabeli, przy
użyciu elementów oraz . Pozwalają one autorom stron WWW na
określenie struktury kolumn tabeli i dalsze określanie ich wyglądu przy wykorzystaniu
arkuszy stylów.
Znaczniki oraz służą do definiowania grup kolumn. W ich
skład może wejść jedna lub kilka kolumn. Znacznik posiada dwa atrybu-
ty.
SPAN atrybut określa ilość kolumn w grupie. Jego wartość musi być liczbą
całkowitą większą od zera. Jeśli atrybut nie zostanie podany, to domyślnie znacznik
zakłada, że grupa składa się z jednej kolumny. Jeśli jednak wewnątrz
znacznika zostanie umieszczony jeden (lub kilka) znaczników ,
to atrybut SPAN zostanie zignorowany,
WIDTH atrybut określa szerokość każdej kolumny należącej do danej grupy.
Szerokość ta może zostać określona jako ilość pikseli, wielkość procentowa
lub wartość względna. Określając szerokość, można także użyć specjalnego
symbolu "0*" (cyfry 0 i gwiazdki). Oznacza on, że szerokością każdej kolumny
grupy powinna być minimalna szerokość konieczna do wyświetlenia zawartości
każdej komórki kolumny. Jeśli jednak posłużysz się tym specjalnym symbolem,
to przeglądarki nie będą w stanie wyświetlać tabeli w sposób przyrostowy.
318 Część 4. Arkusze stylów, tabele i ramki
Załóżmy, że stworzyłeś tabelę o szerokości 450 pikseli, składającą się z sześciu kolumn.
Chciałbyś, aby każda z kolumn miała szerokość 75 pikseli. Kod jakiego powinieneś
użyć może mieć następującą postać:
Teraz chcesz zmienić układ kolumn. Tę samą tabelę o szerokości 450 pikseli zmodyfi-
kujesz w taki sposób, aby pierwsze dwie kolumny miały szerokość 25 pikseli, a pozo-
stałe 4 100 pikseli. Tak modyfikacja wymaga użycia dwóch znaczników UP>:
A jeśli nie chcesz, aby wszystkie kolumny należące do grupy miały tę samą szerokość
lub taki sam wygląd? Do tego właśnie służy element . Element słu-
ży do definiowania struktury kolumn tabeli, natomiast , do określania ich atrybu-
tów. Aby użyć tego elementu należy rozpocząć definicję kolumny od znacznika .
W tym przypadku nie wolno stosować znacznika zamykającego.
Wróćmy do naszej przykładowej tabeli. Tym razem chcesz, aby obie kolumny pierw-
szej grupy miały szerokość 75 pikseli. Natomiast kolumny w drugiej grupie mają mieć
odpowiednio szerokości: 50, 75, 75 oraz 100 pikseli. Poniżej pokazałam, w jaki sposób
można sformatować drugą grupę kolumn przy wykorzystaniu znaczników :
Teraz wykorzystamy poznane znaczniki w prawdziwym przykładzie. Będzie on przed-
stawiał tabelę wyświetlającą rozkład zajęć. Tworzenie przykładu rozpoczniesz od zdefi-
niowania tabeli o obramowaniu szerokości 1 piksela, zajmującej 100% szerokości strony.
Następnie zdefiniujesz grupy kolumn. W pierwszej grupie kolumn zostaną wyświetlone
nazwy zajęć. Druga grupa będzie się składać z dwóch kolumn. W pierwszej z nich będą
wyświetlane numery sal, w jakich odbędą się zajęcia; a w drugiej czas rozpoczęcia
zajęć oraz ich długość. Atrybuty ALIGN oraz VALIGN stosowane w znacznikach
oraz przedstawione w poprzedniej części rozdziału, nie zostały uznane za
przestarzałe w HTML-u 4.0, a zatem będziesz mógł posłużyć się nimi. Pierwsza grupa
kolumn składa się tylko z jednej kolumny, której komórki mają szerokość 20% szeroko-
ści tabeli. Zawartość tych komórek ma być wyrównana w pionie do górnej krawędzi
komórki oraz wyśrodkowana w poziomie. Druga grupa składa się z dwóch kolumn,
Rozdział 11. Tabele 319
z których każda ma szerokość 40 procent całkowitej szerokości tabeli. Zawartość komó-
rek tych kolumn ma być wyrównana w pionie do górnej krawędzi komórek.
Na samym końcu wpisz zawartość tabeli, zupełnie tak samo, jak robiłeś to do tej pory.
Poniżej przedstawiłam pełny kod przykładu tabeli z planem zajęć. Jej wygląd (w Inter-
net Explorerze) przedstawiłam na rysunku 11.27.
Grupowanie kolumn
Plan zajęć
Zajęcia |
Sala |
Godzina |
Biologia |
Sala 102 |
8:00 do 9:45 |
Chemia |
Sala 110 |
9:50 do 11:30 |
Fizyka |
Sala 107 |
13:00 do 14:45 |
Geometria |
Sala 236 |
8:00 do 9:45 |
Algebra |
Sala 239 |
9:50 do 11:30 |
Trygonometria |
Sala 245 |
13:00 do 14:45 |
320 Część 4. Arkusze stylów, tabele i ramki
Rysunek 11.27.
Tabela planu zajęć
ze sformatowanymi
grupami kolumn
Grupowanie i określanie wyrównania wierszy
Teraz, kiedy już znasz nowy sposób grupowania i formatowania kolumn, zajmiemy się
wierszami tabel. Wiersze można zgrupować w trzech sekcjach: w nagłówku tabeli, w jej
stopce oraz w ciele tabeli. Zalety takiego formatowania sÄ… widoczne w przeglÄ…darkach
zgodnych z HTML-em 4.0. Po pierwsze treść tabeli może być przewijana niezależnie
od jej nagłówka i stopki. Co więcej, w przypadku drukowania tabeli zawierającej wiele
wierszy, nagłówek oraz stopka tabeli pojawią się na każdej stronie wydruku. Dodatko-
wo, można wykorzystać kaskadowe arkusze stylów, aby nadać odrębny wygląd na-
główkowi i stopce tabeli oraz jej zawartości.
Sekcje tabeli: nagłówek, stopka oraz ciało są definiowane przy użyciu elementów AD>, oraz . Każdy z tych elementów musi zawierać identyczną ilość
kolumn.
Element & definiuje nagłówek tabeli zawierający informacje o
kolumnach umieszczonych w ciele tabeli. Zazwyczaj zawiera on ten sam typ informacji,
które umieszczałeś w komórkach nagłówka tabeli we wszystkich przykładach przed-
stawionych we wcześniejszej części rozdziału. Jeśli chcesz zdefiniować w tabeli sekcję
nagłówka, musisz ją rozpocząć od znacznika ; zamykający znacznik
jest jednak opcjonalny.
Nagłówek tabeli można umieścić bezpośrednio po znaczniku lub po znaczni-
ku , tak jak pokazałam w kolejnym przykładzie. Wewnątrz nagłówka mu-
sisz umieścić przynajmniej jedną grupę wierszy, zdefiniowaną przy użyciu znacznika
. Nagłówek tabeli może mieć następującą postać:
Plan zajęć
Rozdział 11. Tabele 321
Zajęcia |
Sala |
Godzina |
Element & definiuje stopkę tabeli. Zawsze musi się ona zaczynać
od znacznika , natomiast zamykajÄ…cy znacznik jest opcjonalny.
Stopka tabeli jest definiowana bezpośrednio po nagłówku (jeśli został on zdefiniowany)
lub po znaczniku , jeśli nagłówek tabeli nie został podany. Stopka tabeli musi
zawierać przynajmniej jedną grupę wierszy zdefiniowanych przy użyciu znacznika
. W stopce tabeli można umieścić, na przykład, sumę liczb zapisanych w komór-
kach danej kolumny tabeli.
Stopkę koniecznie należy podać przed treścią tabeli. Wynika to z faktu, iż przeglądarka
musi określić postać stopki, zanim pobierze wszystkie dane umieszczone w treści tabeli.
W naszym przykładzie, w stopce tabeli umieścimy te same informacje, co w jej nagłów-
ku. Oto kod stopki naszej przykładowej tabeli:
Zajęcia |
Sala |
Godzina |
Po zdefiniowaniu nagłówka i stopki tabeli, można podać wiersze tworzące jej ciało. Ta-
bela może zawierać więcej niż jedną sekcję ciała, a każda z nich musi zawierać przy-
najmniej jeden wiersz danych. Czy wszystko już Ci się dokładnie pomieszało i zasta-
nawiasz się, w jaki sposób należy używać tych wszystkich znaczników i jak one dzia-
łają? Poniżej przedstawię przykład prezentujący, dlaczego sekcje są tak ciekawym
rozwiÄ…zaniem.
Elementu & można użyć do zdefiniowania jednej lub kilku sekcji
ciała tabeli. Początkowy znacznik musi został podany, jeśli przynajmniej je-
den z poniższych warunków jest spełniony:
tabela zawiera sekcje nagłówka lub stopki,
tabela zawiera więcej niż jedną sekcję ciała.
Przedstawiona poniżej przykładowa tabela zawiera dwie sekcje ciała, a każda z nich
składa się z trzech wierszy i trzech kolumn. Dwie sekcje ciała tabeli, umieszczone po jej
nagłówku, mają następującą postać:
Biologia |
Sala 102 |
8:00 do 9:45 |
322 Część 4. Arkusze stylów, tabele i ramki
Chemia |
Sala 110 |
9:50 do 11:30 |
Fizyka |
Sala 107 |
13:00 do 14:45 |
Geometria |
Sala 236 |
8:00 do 9:45 |
Algebra |
Sala 239 |
9:50 do 11:30 |
Trygonometria |
Sala 245 |
13:00 do 14:45 |
Po połączeniu wszystkich sekcji tabeli w jedną całość, otrzymamy tabelę przedstawioną
na rysunku 11.28.
Rysunek 11.28.
Plan zajęć w postaci
tabeli posiadajÄ…cej
nagłówek, ciało
oraz stopkÄ™
Atrybuty FRAME oraz RULES
Jeśli spojrzysz na poprzedni przykład, to wcale nie jest oczywiste, które komórki tabeli
należą do poszczególnych grup kolumn i wierszy. Prostym sposobem określenia przy-
należności poszczególnych komórek jest wykorzystanie atrybutów FRAME oraz RULES
znacznika .
Rozdział 11. Tabele 323
Atrybut FRAME określa wygląd zewnętrznego obramowania tabeli. Dostępnych jest kil-
ka specjalnych wartości, których można użyć do określenia, jakie części zewnętrznego
obramowania tabeli będą widoczne.
void
Wartość domyślna. Żadna krawędz zewnętrznego obramowania tabeli nie jest widoczna.
above
Wyświetlana jest wyłącznie górna krawędz obramowania tabeli.
below
Wyświetlana jest wyłącznie dolna krawędz obramowania tabeli.
hsi-
Wyświetlane są górna i dolna krawędz obramowania tabeli.
des
lhs
Wyświetlana jest lewa krawędz obramowania tabeli.
rhs
Wyświetlana jest prawa krawędz obramowania tabeli.
vsi-
Wyświetlane są prawa i lewa krawędz obramowania tabeli.
des
box
Wyświetlane są wszystkie cztery krawędzie obramowania tabeli.
bor-
Wyświetlane są wszystkie cztery krawędzie obramowania tabeli.
der
Atrybut RULES jest nieco podobny do atrybutu FRAME, z tą różnicą, iż służy on do defi-
niowania linii wyświetlanych pomiędzy komórkami tabeli. Poniżej podałam wartości,
które można przypisać temu atrybutowi.
none
Wartość domyślna. Wewnątrz tabeli nie będą wyświetlane żadne linie.
gro-
Linie będą wyświetlane wyłącznie pomiędzy grupami wierszy zdefiniowanymi przy
ups
użyciu znaczników , i oraz pomiędzy grupami kolumn
zdefiniowanymi przy użyciu znaczników oraz .
rows
Linie pojawią się wyłącznie pomiędzy wierszami tabeli.
cols
Linie pojawią się wyłącznie pomiędzy kolumnami tabeli.
all
Linie zostaną wyświetlone pomiędzy wszystkimi wierszami i kolumnami tabeli.
Dysponując tymi informacjami, możesz sprawić, aby grupy kolumn i wierszy w naszej
przykładowej tabeli były lepiej widoczne. Chcesz, aby wokół tabeli zostało wyświetlone
obramowanie, jednak ma się ono pojawić wyłącznie wzdłuż jej górnej i dolnej krawę-
dzi. W tym celu umieścisz w znaczniku atrybut FRAME="hsides".
Wewnątrz tabeli oddzielisz liniami wszystkie sekcje tabeli nagłówek, stopkę oraz
obie sekcje ciała. Poza tym oddzielisz liniami obie grupy kolumn zajęcia oraz infor-
324 Część 4. Arkusze stylów, tabele i ramki
macje o salach i godzinach zajęć. Wszystkie te modyfikacje można wprowadzić,
umieszczajÄ…c w znaczniku atrybut RULES="groups".
Wszystkie powyższe modyfikacje można wprowadzić, dodając dwa atrybuty do jednej
linijki kodu. Poniżej przedstawiłam nową postać definicji tabeli, natomiast sama tabela,
wyświetlona w Internet Explorerze, została pokazana na rysunku 11.29.
Rysunek 11.29.
Tabela planu zajęć
ze zdefiniowanymi
liniami pomiędzy
grupami kolumn
i wierszy
Inne elementy i atrybuty tabel
W tabeli 11.1 przedstawiłam kilka dodatkowych elementów i atrybutów związanych
z tabelami.
Tabela 11.1.
Inne elementy i atrybuty tabel
Atrybut Używany w elementach
CHAR
w komórkach i kolumnach Określa znak, którego należy użyć jako osi do wyrównania
tabel zawartości komórki. Na przykład, można go użyć
do wyrównania przecinka dziesiętnego w wartościach
liczbowych. Atrybut ten może zostać użyty w znacznikach
, , , , , ,
oraz | .
CHAROFF
w komórkach i kolumnach Określa wielkość przesunięcia pierwszego wystąpienia znaku,
tabel według którego jest wyrównywana zawartość komórki
(określonego atrybutem CHAR). Atrybut ten może zostać użyty
w znacznikach , , | , ,
, , | oraz | .
SUMMARY
Określa bardziej szczegółowy opis zawartości tabeli.
Przede wszystkim jest on wykorzystywany w przeglÄ…darkach,
które nie prezentują zawartości stron w sposób wizualny.
Rozdział 11. Tabele 325
Podsumowanie
Tematem tego rozdziału były tabele. Tabele umożliwiają organizację danych w wier-
szach i kolumnach. Dzięki takiemu układowi, czytelnik ma szybki dostęp do potrzeb-
nych mu informacji.
Dowiedziałeś się z tego rozdziału, jak definiować nagłówki, dane, podpisy, wiersze,
komórki, sposób wyrównania zawartości komórki i komórki, które rozpięte są na wielu
wierszach i (lub) kolumnach. Wiedza ta pomoże Ci przygotowywać tabele służące naj-
różniejszym celom.
A teraz parę rad, które będą Ci pomocne przy konstruowaniu tabeli:
naszkicuj kolumny i wiersze tabeli. Zaznacz komórki, które rozpięte są na kilku
wierszach i (lub) kolumnach,
rozpocznij od podstawowego szkieletu strony i uzupełniaj go o wiersze, nagłówki
i dane tabeli, wpisując odpowiednie kody HTML, wiersz po wierszu, komórka
po komórce. Jeśli to konieczne, wprowadz komórki, które rozpięte są na kilku
wierszach i (lub) kolumnach. Często testuj kod w przeglądarce,
zdefiniuj taki sposób wyrównania wierszy, który odzwierciedla wyrównanie
większości komórek,
zmień sposób wyrównania w określonych komórkach,
jeśli to konieczne, wprowadz łamania wiersza,
dopracuj wygląd tabeli, wprowadzając odstępy między komórkami, odstępy między
zawartością komórki a jej obramowaniem i definiując kolory,
przetestuj tabele w wielu przeglądarkach. Zazwyczaj różne przeglądarki wyświetlają
tabele w różny sposób. Mogą także być mniej lub bardziej liberalne dla Twoich
błędów w kodzie HTML.
Tabela 11.2 zawiera krótkie podsumowanie wszystkich elementów tabel, jakie poznałeś
w tym rozdziale i które wciąż są stosowane w standardzie HTML 4.0. Atrybuty każdego
z tych elementów zostały podane w tabeli 11.3.
Tabela 11.2:
Elementy tabel dostępne w HTML 4.0.
Znacznik Zastosowania
Definiuje tabelÄ™.
& Tworzy opcjonalny podpis tabeli.
& Definiuje grupę składającą się z jednej lub z kilku kolumn.
& Stosowany do określania atrybutów konkretnej kolumny tabeli.
& Tworzy grupę wierszy definiujących nagłówek tabeli. Tabela może
zawierać tylko jeden nagłówek.
& Tworzy grupę wierszy definiujących stopkę tabeli. Tabela może
zawierać tylko jeden nagłówek. Stopka musi zostać zdefiniowana przed
326 Część 4. Arkusze stylów, tabele i ramki
treścią tabeli.
& Definiuje jednÄ… lub kilka grup wierszy umieszczonych wewnÄ…trz tabeli.
Tabela może zawierać kilka takich sekcji.
& Definiuje wiersz tabeli, który może zawierać nagłówek lub dane.
& | Definiuje komórkę zawierającą nagłówek. Zawartość komórek
nagłówka jest zazwyczaj wyświetlana czcionką pogrubioną
i jest centrowana zarówno w pionie, jak i w poziomie.
& | Definiuje komórkę zawierającą dane. Zawartość komórek danych jest
zazwyczaj wyświetlana zwykłą czcionką i jest wyrównana do lewej
krawędzi oraz centrowana w pionie.
Kilka atrybutów można zastosować w wielu różnych elementach tabel, z tego względu
przedstawię je w osobnej tabeli. Tabela 11.3 zawiera krótkie podsumowanie informacji
o atrybutach tabel przedstawionych w tym rozdziale, które wciąż są wykorzystywane
w standardzie HTML 4.0.
Warsztat
Pytania i odpowiedzi
P. Pod względem układu tabele to koszmar. Szczególnie w przypadku komórek
rozpiętych na wierszach lub kolumnach. Ostatni przykład był straszny.
Tabela 11.3.
Atrybuty tabel dostępne w HTML 4.0.
Atrybut Stosowany Zastosowanie
do elementu
ALIGN
Dostępne wartości to LEFT, RIGHT i CENTER, określa sposób
wyrównania komórek danego wiersza w poziomie (ustawienie
jest dominujące nad domyślnym ustawieniem wyrównania
nagłówka i komórek tabeli).
, |
To ustawienie jest dominujące nad ustawieniem wyrównania
wiersza i domyślnym ustawieniem wyrównania komórek tabeli.
,
Stosowany od określania wyrównania zawartości komórek tabeli
|
|---|
,
(zarówno nagłówka, stopki, jak i treści tabeli). Dostępne
wartości to LEFT, CENTER oraz RIGHT.
Stosowany do określenia wyrównania zawartości wszystkich
komórek danej kolumny tabeli. Dostępne wartości to LEFT,
CENTER oraz RIGHT.
Stosowany do określania wyrównania zawartości komórek
wszystkich kolumn tabeli należących do danej grupy. Dostępne
wartości to LEFT, CENTER oraz RIGHT.
W HTML-u 4.0 uznany za przestarzały. Dostępne wartości
to LEFT, CENTER oraz RIGHT. Wartość CENTER nie jest
poprawnie obsługiwana w przeglądarkach zgodnych z HTML
Rozdział 11. Tabele 327
3.2 i wcześniejszych. Określa sposób wyrównania tabeli i
wskazuje, że towarzyszący tabeli tekst będzie ją otaczał.
W HTML-u 4.0 uznany za przestarzały. Dla większości
przeglądarek dostępne wartości to TOP i BOTTOM.
W przeglądarkach zgodnych z HTML 4.0 dostępne są dwie
dodatkowe wartości: LEFT oraz RIGHT. W przeglądarce Internet
Explorer ma wartości LEFT, RIGHT i CENTER i określa sposób
wyrównania podpisu w poziomie.
BGCOLOR Wszystkie
(HTML 3.2, w HTML-u 4.0 przestarzały) Zmienia tło elementu
tabeli. Ustawienia kolorów komórek dominują nad ustawieniami
kolorów tabeli. Wartością jest liczba szesnastkowa
lub nazwa koloru.
BORDER
Określa, czy tabela zostanie obramowana. Domyślnie
obramowanie nie jest rysowane. Jeśli ma wartość, definiuje ona
szerokość trójwymiarowego obramowania wokół tabeli.
BORDERCOLOR
(Rozszerzenie programu Internet Explorer i Netscape.)
Może być stosowany z dowolnym znacznikiem tabeli. Zmienia
kolor obramowania elementu tabeli. Wartością jest liczba
szesnastkowa lub nazwa koloru
BORDERCOLORLIGH
(Rozszerzenie programu Internet Explorer.). Identyczny
T
z BORDERCOLOR, z tym wyjątkiem, iż ustala kolor rozjaśnienia
trójwymiarowego obramowania.
BORDERCOLORDARK
Rozszerzenie programu Internet Explorer. Identyczny
z BORDERCOLOR, z tym wyjątkiem, iż ustala kolor cienia
trójwymiarowego obramowania.
Tabela 11.3.
Atrybuty tabel dostępne w HTML 4.0. (ciąg dalszy)
Atrybut Stosowany Zastosowanie
do elementu
CELLSPACING Definiuje wolną przestrzeń między komórkami tabeli.
CELLPADDING Definiuje wolną przestrzeń między krawędziami komórki a jej
zawartością.
CHAR Określa znak, którego należy użyć jako osi do wyrównania
zawartości komórki (na przykład, przecinek w wartościach
liczbowych). Atrybut ten może zostać użyty w znacznikach
, , , , , ,
oraz | .
CHAROFF Określa wielkość przesunięcia pierwszego wystąpienia znaku,
według którego jest wyrównywana zawartość komórki
(określonego atrybutem CHAR). Atrybut ten może zostać użyty
w znacznikach , , | , ,
, , | oraz | .
FRAME Określa, jakie krawędzie obramowania tabeli będą widoczne.
Dostępne wartości to: void, above, below, hsides, lhs, rhs,
box, border.
328 Część 4. Arkusze stylów, tabele i ramki
HEIGHT lub Przestarzały w HTML-u 4.0. Określa wysokość komórki tabeli
| wyrażoną w pikselach lub jako wartość procentowa.
NOWRAP | lub Przestarzały w HTML-u 4.0. Zapobiega zawijaniu tekstu
| w komórce.
RULES Określa, jakie linie (podziału) pomiędzy komórkami tabeli będą
widoczne. Dostępne wartości to: none, groups, rows, cols oraz
all.
WIDTH Wskazuje szerokość tabeli w pikselach lub w procentach
względem szerokości strony (na przykład, 50%).
SPAN Określa ilość kolumn należących do grupy. Wartością tego
atrybutu musi być liczba całkowita większa od zera.
Określa ilość kolumn, które obejmuje dana komórka tabeli.
Wartością tego atrybutu musi być liczba całkowita większa
od zera.
WIDTH Określa szerokość wszystkich komórek w danej grupie kolumn.
Określa szerokość komórek danej kolumny.
COLSPAN lub Określa liczbę komórek na prawo od danej, na których jest
| ona rozpięta.
ROWSPAN | lub Określa liczbę komórek poniżej danej, na których jest
| ona rozpięta.
VALIGN | Określa sposób wyrównania komórek danego wiersza w pionie
(ustawienie jest dominujące nad domyślnym). Dostępne wartości
TOP, MIDDLE i BOTTOM.
Tabela 11.3.
Atrybuty tabel dostępne w HTML 4.0. (ciąg dalszy)
Atrybut Stosowany Zastosowanie
do elementu
lub Ustawienie jest dominujące nad ustawieniem wyrównania
| wiersza i domyślnym ustawieniem wyrównania komórek tabeli.
Dostępne wartości TOP, MIDDLE i BOTTOM.
W Netscape ma również wartość BASELINE.
, Określa wyrównanie w pionie zawartości komórek nagłówka,
| , stopki oraz treści tabeli.
Określa wyrównanie w pionie zawartości komórek należących
do danej grupy kolumn.
Określa wyrównanie w pionie zawartości komórek danej
kolumny tabeli.
WIDTH lub Przestarzały w HTML-u 4.0. Określa szerokość komórki
| wyrażoną w pikselach lub w procentach, względem szerokości
Rozdział 11. Tabele 329
strony (na przykład, 50%).
O. Masz rację. Ręczne tworzenie tabeli nie należy do przyjemności. Jeśli jednak jesteś
programistą i piszesz filtry oraz narzędzia generowania kodu HTML, taki sposób de-
finiowania tabeli ma sens, bowiem umożliwia on bezpośrednie przepisywanie za-
wartości wierszy. Wcześniej lub pózniej wszyscy będziemy korzystać z filtrów
HTML (mam nadzieję), więc ręczna praca nad tabelami nie potrwa długo.
P. Moje tabele działają wspaniale w Netscape Navigatorze, natomiast w innych
przeglądarkach jest w nich bałagan. Gdzie popełniam błąd?
O. Czy nie zapomniałeś zamknąć któregoś ze elementów | , | i | ?
Sprawdz, czy jest odpowiednia liczba znaczników zamykających | , i
. Pomimo, iż są one opcjonalne, często przeglądarki nie są w stanie bez nich
poprawnie zinterpretować tabeli.
P. Czy można zagnieżdżać tabelę, umieszczając ją w komórce innej tabeli?
O. Oczywiście! Jak wspominałam w tym rozdziale, możesz w komórce umieszczać
dowolny kod HTML, w tym także inną tabelę.
P. Dlaczego w przeważającej większości przypadków do określania położenia ty-
tułu tabeli, wyświetlanego powyżej lub poniżej niej, używany jest atrybut ALIGN,
a Internet Explorer działa zupełnie inaczej?
O. Nie wiem. A co gorsza, firma Microsoft twierdzi, że Internet Explorer działa w ten
sposób ze względu na sposób definicji HTML-a 3.0. Jednak wykorzystane rozwią-
zanie nie zostało zdefiniowane ani w HTML-u 3.0, ani w HTML-u 3.2. HTML 4.0
proponuje dodanie atrybutów umożliwiających wyrównanie tytułu tabeli do lewej
lub prawej, jednak w przeglądarce Internet Explorer te sposoby wyrównywania były
dostępne, zanim w języku HTML pojawiły się jakiekolwiek wzmianki na temat ta-
kich możliwości.
Quiz
1. Jakie sÄ… podstawowe elementy tabel, jakie znaczniki je identyfikujÄ…?
2. Jaki jest najczęściej używany atrybut znacznika , do czego on służy?
3. Jakie atrybuty określają odległość pomiędzy zawartością tabeli a jej brzegami
oraz pomiędzy poszczególnymi komórkami tabeli?
4. Jaki atrybuty są stosowane do tworzenia komórek zajmujących więcej niż jeden
wiersz lub kolumnÄ™ tabeli?
5. Jakie elementy są używane do definiowania nagłówka, treści oraz stopki tabel?
Odpowiedzi
1. Podstawowymi elementami tabel (znacznika ) sÄ…: obramowanie
330 Część 4. Arkusze stylów, tabele i ramki
(definiowane przy użyciu atrybutu BORDER), tytuł (definiowany przy użyciu
znacznika ), komórki nagłówka (), komórki danych ( | )
oraz wiersze tabeli ( | ).
2. Najczęściej stosowanym atrybutem tabel jest atrybut BORDER. Określa on, czy
wokół tabeli mają być wyświetlane obramowania, a jeśli tak, to jakiej szerokości.
3. Atrybut CELLPADDING określa wielkość odstępu pomiędzy brzegami komórki
a jej zawartością. Atrybut CELLSPACING definiuje wielkość odstępu pomiędzy
poszczególnymi komórkami tabeli.
4. Atrybut ROWSPAN pozwala definiować komórki rozpięte na kilku wierszach,
natomiast atrybut COLSPAN, komórki rozpięte na kilka kolumn.
5. Znaczniki , oraz definiują odpowiednio nagłówek,
ciało oraz stopkę tabeli.
Ćwiczenia
1. Oto łamigłówka, którą masz rozwiązać. Spróbuj stworzyć zagnieżdżoną tabelę (czyli
tabelę wewnątrz tabeli). Stwórz prostą tabelę składającą się z trzech wierszy i trzech
kolumn. Następnie wewnątrz komórki znajdującej się w drugim wierszu i drugiej
kolumnie, stwórz następną tabelę składającą się z dwóch wierszy i dwóch kolumn.
2. Zmodyfikuj tabelę przedstawioną na rysunku 11.28 w taki sposób, aby linie
wyświetlane wewnątrz niej były widoczne wyłącznie pomiędzy kolumnami tabeli
(czyli w pionie).
Wyszukiwarka
Podobne podstrony:
2010 11 07 WIL Wyklad 07
więcej podobnych podstron
| |
| | | | | | |
