HTML
Marcin Staniszczak
HTML: zaawansowane
CZEGO SIĘ DOWIESZ Z TEGO ARTYKUŁU:
możliwości tabel
nauczysz się wykorzystywać zaawansowane możli-
wości tabel oraz tworzyć odnośniki umieszczane na
stronie internetowej (zarówno do innych stron, jak
i w obrębie jednej strony
WYMAGANA WIEDZA:
poprzedniej części kursu nauczyliśmy się tworzyć oraz Bardzo ciekawa wyda- podstawowa umiejętnoSć posługiwania się komputerem
Wformatować tabele. Mimo, że zdobyta wiedza wydaje się wać się może opcja wyrów- oraz systemem Windows
materiał zawarty w poprzedniej częSci kursu (MI 4/06)
obszerna, nie jest jeszcze pełna. Od HTML-a 4.0 dostępnych jest nania tekstu w stosunku do
kilka nowych możliwości, które przedstawimy w tej części kursu. pewnego znaku. Wyobraz-
Tabele są jednymi z najbardziej zaawansowanych i najbardziej my sobie sytuację, gdy w tabeli prezentujemy pewne informacje licz-
złożonych bloków HTML. Warto jednak poświęcić nieco czasu na bowe. Liczby te to ułamki, w których znakiem rozdzielającym część
poznanie ich budowy, gdyż są elementem często wykorzystywa- całkowitą od ułamkowej jest przecinek (,). Niewątpliwie bardzo ład-
nym na stronach. nie wyglądałaby tabela, jeśli wyrównalibyśmy taką kolumnę według
znaku przecinka. Niestety, przeglądarki wciąż nie obsługują tego a-
Grupowanie kolumn trybutu. Ale prawdopodobnie to tylko kwestia czasu, więc warto już
Kolumny tabel można grupować, co ułatwia łatwiejsze ich formato- dziś wiedzieć, że taka możliwość została przewidziana.
wanie, np. za pomocą stylów. Do grupowania kolumn wykorzystuje Najważniejszym atrybutem znacznika
jest span. A-
się znacznik . Można mu przekazać sześć atrybutów: trybut ten określa liczbę kolumn, które mają zostać zgrupowane.
align sposób wyrównania danych w kolumnie, Jeśli chcemy utworzyć większą liczbę grup, każdy znacznik char definiuje znak, według którego dane mają być wyrów- group> będzie dotyczyć kolejnych kolumn. Zobaczmy przykład:
nywane,
charoff przesunięcie do pierwszego znaku, według które- go będzie wyrównywana zawartość komórek, silver; align= left />
span liczba kolumn w grupie, valign wyrównanie zawartości komórki w pionie, #eee; align= center />
width szerokość kolumny jako liczba pikseli lub wartość
procentowa. Lp. | Nazwa | Cena |
Atrybut align może przyjmować wartości:
|---|
left wyrównanie zawartości komórki do lewej,
right wyrównanie zawartości komórki do prawej, 1 | Procesor | 980.00 |
center wyrównanie zawartości komórki do środka,
justify wyrównanie zawartości do obu brzegów komórki, ...
char wyrównanie wg znaku podanego w atrybucie char.
Atrybut valign może przyjąć jedną z wartości: 10 | Listwa antyprzepięciowa |
top wyrównanie w pionie do góry komórki,
2
middle wyrównanie w pionie do środka komórki,
bottom wyrównanie w pionie do dołu komórki,
baseline wyrównanie do linii bazowej (zob. rys. 1).
1
>> Rys. 2. Działanie kilku grup kolumn w jednej tabeli
INTERNET.maj.2006
>> Rys. 1. Wyrównanie tekstu w pionie komórki
89
www.mi.com.pl
WEBMASTERING
3
1 | Procesor |
Intel Pentium D 820 (S775) 2.80 GHz |
1 | 980.00 |
...
Razem | 4160,57 |
Na koniec informacji o grupowaniu kolumn kubek zimnej wody
mimo że sposób ten wydaje się bardzo wygodny i przydatny, prze-
glądarki wciąż nie w pełni wspierają formatowanie zgrupowanych
kolumn. Wystarczy, że przyjrzymy się rys. 3 znajduje się tam
obok wytłumaczenia działania bloku także dobra prezentacja
niedociągnięć występujących w przeglądarkach. Tekst w przedos-
tatniej kolumnie powinien być wyświetlony kolorem czerwonym, po-
chyłą czcionką. Niestety, Opera i Firefox zupełnie ignorują tę infor-
mację, Internet Explorer natomiast wyświetla tekst kolorem czer-
wony, lecz już nie stosuje dla niego pochyłej czcionki.
>> Rys. 3
Grupowanie wierszy
Zasada
31.00 | Poza grupowaniem kolumn, HTML umożliwia także grupowanie
działania
znacznika wierszy. Wiersze można pogrupować w trzy sekcje: nagłówek, ciało
oraz stopkę. Służą do tego odpowiednio bloki ...| Razem | 2488,57 | ad>,
..., .... Każda tabela
może mieć maksymalnie jeden nagłówek oraz jedną stopkę. Nie ist-
Na rys. 2 przedstawiono wynik działania kodu przykładowej ta- nieją jednak podobne ograniczenia odnośnie sekcji ciała tabeli mo-
beli wraz z opisem. Zauważmy, w jaki sposób traktowany jest a- żemy podzielić swoją tabelę na wiele takich sekcji.
trybut span znacznik z pierwszego znacznika od- Wewnątrz sekcji nagłówka najczęściej umieszcza się znaczniki
nosi się do pierwszej kolumny (span= 1 nakazuje grupowanie wraz z . Należy pamiętać, że sekcję nagłówka
tylko jednej kolumny), natomiast span z drugiego znacznika grupu- umieszcza się albo zaraz bo znaczniku , albo po je drugą oraz trzecią kolumnę (span= 2 nakazuje zgrupowanie 2 group>. Sekcja ta musi także zawierać definicję przynajmniej jed-
kolumn, jako że pierwsza kolumna już należy do innej grupy, group> grupuje kolejne dwie kolumny). nych jej kolumn patrz niżej).
Równie przydatnym znacznikiem jak jest znacznik Sekcja stopki jest bardzo często powtórzeniem sekcji nagłówka.
. Używa się go do formatowania grupy kolumn, wówczas gdy Zwróćmy uwagę, że sekcja stopki umieszczana jest zaraz po sekcji
nie chce się, aby wszystkie kolumny w grupie były traktowane jedna- nagłówka, nie zaś przed znacznikiem zamykającym tabelę (kowo. Znaczniki umieszcza się w bloku , jedno- le>). Po sekcjach nagłówka oraz stopki umieszcza się sekcje ciała
cześnie nie trzeba stosować atrybutu span w . Zamiast tabeli. Sekcji tych, w przeciwieństwie do dwóch wcześniejszych,
tego dla każdej formatowanej kolumny należy użyć znacznika . może być wiele. Przyjrzyjmy się przykładowemu kodowi XHTML:
Znacznik ten może przyjąć dokładnie takie same atrybuty jak
group>. Oznacza to, że za pomocą tego znacznika możemy jedno- cześnie formatować większą liczbę kolumn. Jak zobaczymy w pózniej- silver; align= left />
szym przykładzie jest to bardzo przydatne, szczególnie w połączeniu z innymi opisanymi w dalszej części znacznikami obsługującymi tabelę. color: #eee />
Przyjrzyjmy się więc rozszerzonej o nowe informacje tabeli z poprzedniego przykładu: red; font-syle: italic />
silver; align= left />
Lp. Część | Model |
color: #eee /> Ilość | Cena |
red; font-syle: italic />
|---|
#fbb; align= right />
|
| Lp. | Część | Model |
Lp. | Część | Model | Ilość | Cena |
Ilość | Cena |
Edytor ezHTML jest niestety bardzo prostym narzędziem i nie oferuje wsparcia dla najbardziej
INTERNET.maj.2006
zaawansowanych możliwości tabel. Nie jest to jednak duże ograniczenie, gdyż z powodzeniem
90
www.mi.com.pl można wszystkie informacje wpisać ręcznie, ucząc się przy okazji zasady ich funkcjonowania.
HTML
Chcesz wiedzieć więcej? Odwiedz nasze forum:
http://forum.mi.com.pl
1 | Procesor |
hsides nakazuje wyświetlanie zarówno górnej, jak i dolnej
Intel Pentium D 820 (S775) 2.80 GHz |
krawędzi tabeli,
1 | 980.00 |
lhs nakazuje wyświetlanie lewej krawędzi tabeli,
rhs nakazuje wyświetlanie prawej krawędzi tabeli,
...
vsides nakazuje wyświetlanie zarówno lewej jak i prawej
krawędzi tabeli,
Razem | 4160,57 |
box powoduje wszystkich krawędzi tabeli,
border ma takie samo działanie jak wartość box.
Atrybut rules natomiast definiuje obramowanie znajdujące się
Na rys. 4 możemy zobaczyć jak będzie wyglądać taki kod
pomiędzy komórkami tabeli. Przyjmuje jedną z poniższych wartości:
w przeglądarce internetowej. Od razu rzuca się w oczy to, że
none oznacza, że wszystkie wewnętrzne krawędzie tabeli
stopka mimo iż została zdeklarowana zaraz pod nagłówkiem, wy-
mają pozostać niewidoczne,
świetlana jest na samym dole tabeli.
groups określa, że linie mają zostać wyświetlane jedynie
Wszystkie te trzy bloki (, , oraz )
pomiędzy grupami , , , mogą przyjmować cztery atrybuty align, char, charoff, oraz va-
group> oraz ,
lign. Niestety, tak jak w przypadku znaczników oraz
rows nakazuje wyświetlanie linii jedynie pomiędzy wiersza-
, tak i tutaj przeglądarki nie potrafią jeszcze poprawnie
mi tabeli,
zinterpretować atrybutów charoff oraz char.
cols nakazuje wyświetlanie linii jedynie pomiędzy komórka-
Podział tabeli na trzy bloki nagłówek, stopkę oraz ciało tabeli
mi tabeli,
jest szczególnie pomocne przy druku długich tabel. Dzięki wy-
all nakazuje wyświetlanie wszystkich (pomiędzy wszystkimi
raznemu podziałowi na bloki, przeglądarka podczas wydruku doda-
wierszami oraz komórkami tabeli).
je do tabeli nagłówek oraz stopkę na każdej stronie wydruku. Po-
Na rys. 5 znajduje się przykład działania kilku wybranych war-
woduje to znaczną poprawę czytelności tak wydrukowanej strony.
tości obu atrybutów. Zapoznanie się z działaniem pozostałych
Oczywiście można także za pomocą stylów osobno sformatować
wartości pozostawiamy Czytelnikom.
każdy z tych bloków.
5
>> Rys. 5
Przykład
Dodatkowe atrybuty znacznika
działania
Gdy umiemy już podzielić tabele na grupy, dowiemy się w jaki spo-
atrybutów
sób można wyróżnić bloki, ustawiając odpowiednio obramowanie
frame oraz
rules
pomiędzy komórkami. Służą do tego dwa dodatkowe atrybuty
znacznika
znacznika
|