HTML

W

poprzedniej części kursu nauczyliśmy się tworzyć oraz

formatować tabele. Mimo, że zdobyta wiedza wydaje się

obszerna, nie jest jeszcze pełna. Od HTML-a 4.0 dostępnych jest

kilka nowych możliwości, które przedstawimy w tej części kursu.

Tabele są jednymi z najbardziej zaawansowanych i najbardziej

złożonych bloków HTML. Warto jednak poświęcić nieco czasu na

poznanie ich budowy, gdyż są elementem często wykorzystywa-

nym na stronach.

Grupowanie kolumn

Kolumny tabel można grupować, co ułatwia łatwiejsze ich formato-

wanie, np. za pomocą stylów. Do grupowania kolumn wykorzystuje

się znacznik <colgroup>. Można mu przekazać sześć atrybutów:

4

align – sposób wyrównania danych w kolumnie,

4

char – definiuje znak, według którego dane mają być wyrów-

nywane,

4

charoff – przesunięcie do pierwszego znaku, według które-

go będzie wyrównywana zawartość komórek,

4

span – liczba kolumn w grupie,

4

valign – wyrównanie zawartości komórki w pionie,

4

width – szerokość kolumny jako liczba pikseli lub wartość

procentowa.

Atrybut

align

może przyjmować wartości:

4

left – wyrównanie zawartości komórki do lewej,

4

right – wyrównanie zawartości komórki do prawej,

4

center – wyrównanie zawartości komórki do środka,

4

justify – wyrównanie zawartości do obu brzegów komórki,

4

char – wyrównanie wg znaku podanego w atrybucie

char

.

Atrybut

valign

może przyjąć jedną z wartości:

4

top – wyrównanie w pionie do góry komórki,

4

middle – wyrównanie w pionie do środka komórki,

4

bottom – wyrównanie w pionie do dołu komórki,

4

baseline – wyrównanie do linii bazowej (zob. rys. 1).

Bardzo ciekawa wyda-

wać się może opcja wyrów-

nania tekstu w stosunku do

pewnego znaku. Wyobraź-

my sobie sytuację, gdy w tabeli prezentujemy pewne informacje licz-

bowe. Liczby te to ułamki, w których znakiem rozdzielającym część

całkowitą od ułamkowej jest przecinek (,). Niewątpliwie bardzo ład-

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-

trybutu. Ale prawdopodobnie to tylko kwestia czasu, więc warto już

dziś wiedzieć, że taka możliwość została przewidziana.

Najważniejszym atrybutem znacznika <colgroup> jest

span

. A-

trybut ten określa liczbę kolumn, które mają zostać zgrupowane.

Jeśli chcemy utworzyć większą liczbę grup, każdy znacznik <col-

group> będzie dotyczyć kolejnych kolumn. Zobaczmy przykład:

<table border=”1”>

<colgroup span=”1” style=”background-color:

Ã

silver;” align=”left”/>
<colgroup span=”2” style=”background-color:

Ã

#eee;” align=”center”/>
<tr>

<th>Lp.</th> <th>Nazwa</th> <th>Cena</th>

</tr>
<tr>

<td>1</td> <td>Procesor</td> <td>980.00</td>

</tr>

...

<tr>

<td>10</td> <td>Listwa antyprzepięciowa</td>

HTML:

zaawansowane

możliwości tabel

Marcin Staniszczak

>>

Rys. 1.

Wyrównanie tekstu w pionie komórki

>>

Rys. 2.

Działanie kilku grup kolumn w jednej tabeli

89

INTERNET.maj.2006

www.mi.com.pl

1

2

W

EB

M

AS

TE

RIN

G

CZEGO SIÊ DOWIESZ Z TEGO ARTYKU£U:

l

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:

l

podstawowa umiejêtnoœæ pos³ugiwania siê komputerem

oraz systemem Windows

l

materia³ zawarty w poprzedniej czêœci kursu (MI 4/06)

90

INTERNET.maj.2006

www.mi.com.pl

<td>31.00</td>

</tr>
<tr>

<td colspan=”2”>Razem</td> <td>2488,57</td>

</tr> </table>

Na rys. 2 przedstawiono wynik działania kodu przykładowej ta-

beli wraz z opisem. Zauważmy, w jaki sposób traktowany jest a-

trybut

span

– znacznik z pierwszego znacznika <colgroup> od-

nosi się do pierwszej kolumny (span=”1” nakazuje grupowanie

tylko jednej kolumny), natomiast

span

z drugiego znacznika grupu-

je drugą oraz trzecią kolumnę (span=”2” nakazuje zgrupowanie 2

kolumn, jako że pierwsza kolumna już należy do innej grupy, <col-

group> grupuje kolejne dwie kolumny).

Równie przydatnym znacznikiem jak <colgroup> jest znacznik

<col>. Używa się go do formatowania grupy kolumn, wówczas gdy

nie chce się, aby wszystkie kolumny w grupie były traktowane jedna-

kowo. Znaczniki <col> umieszcza się w bloku <colgroup>, jedno-

cześnie nie trzeba stosować atrybutu span w <colgroup>. Zamiast

tego dla każdej formatowanej kolumny należy użyć znacznika <col>.

Znacznik ten może przyjąć dokładnie takie same atrybuty jak <col-

group>. Oznacza to, że za pomocą tego znacznika możemy jedno-

cześnie formatować większą liczbę kolumn. Jak zobaczymy w później-

szym przykładzie jest to bardzo przydatne, szczególnie w połączeniu

z innymi opisanymi w dalszej części znacznikami obsługującymi tabelę.

Przyjrzyjmy się więc rozszerzonej o nowe informacje tabeli

z poprzedniego przykładu:

<table border=”1”>

<colgroup span=”1” style=”background-color:

Ã

silver;” align=”left”/>
<colgroup>

<col span=”2” align=”left” style=”background-

Ã

color: #eee”/>
<col span=”1” align=”center” style=”color:

Ã

red; font-syle: italic”/>

</colgroup>
<colgroup span=”1” style=”background-color:

Ã

#fbb;” align=”right”/>
<tr>

<th>Lp.</th> <th>Część</th> <th>Model</th>
<th>Ilość</th> <th>Cena</th>

</tr>

<tr>

<td>1</td> <td>Procesor</td>
<td>Intel Pentium D 820 (S775) 2.80 GHz</td>
<td>1</td> <td>980.00</td>

</tr>
...
<tr>

<td colspan=”4”>Razem</td> <td>4160,57</td>

</tr>

</table>

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

Grupowanie wierszy

Poza grupowaniem kolumn, HTML umożliwia także grupowanie

wierszy. Wiersze można pogrupować w trzy sekcje: nagłówek, ciało

oraz stopkę. Służą do tego odpowiednio bloki <thead>...</the-

ad>, <tbody>...</tbody>, <tfoot>...</tfoot>. Każda tabela

może mieć maksymalnie jeden nagłówek oraz jedną stopkę. Nie ist-

nieją jednak podobne ograniczenia odnośnie sekcji ciała tabeli – mo-

żemy podzielić swoją tabelę na wiele takich sekcji.

Wewnątrz sekcji nagłówka najczęściej umieszcza się znaczniki

<tr> wraz z <th>. Należy pamiętać, że sekcję nagłówka

umieszcza się albo zaraz bo znaczniku <table>, albo po <col-

group>. Sekcja ta musi także zawierać definicję przynajmniej jed-

nego wiersza tabeli (jest to zazwyczaj opis zawartości poszczegól-

nych jej kolumn – patrz niżej).

Sekcja stopki jest bardzo często powtórzeniem sekcji nagłówka.

Zwróćmy uwagę, że sekcja stopki umieszczana jest zaraz po sekcji

nagłówka, nie zaś przed znacznikiem zamykającym tabelę (</tab-

le>). Po sekcjach nagłówka oraz stopki umieszcza się sekcje ciała

tabeli. Sekcji tych, w przeciwieństwie do dwóch wcześniejszych,

może być wiele. Przyjrzyjmy się przykładowemu kodowi XHTML:

<table border=”1”>

<colgroup span=”1” style=”background-color:

Ã

silver;” align=”left”/> <colgroup>

<col span=”2” align=”left” style=”background-

Ã

color: #eee”/>
<col span=”1” align=”center” style=”color:

Ã

red; font-syle: italic”/> </colgroup>

<colgroup span=”1” style=”background-color:

Ã

#fbb;” align=”right”/>
<thead style=”background-color: #ddd”>

<tr>

<th>Lp.</th> <th>Część</th> <th>Model</th>
<th>Ilość</th> <th>Cena</th>

</tr>

</thead>
<tfoot style=”background-color: #ddd;

Ã

font-style:italic”>

<tr>

<th>Lp.</th> <th>Część</th> <th>Model</th>
<th>Ilość</th> <th>Cena</th>

</tr> </tfoot> <tbody>
<tr>

>>

Rys. 3

Zasada

działania

znacznika

<col>

3

Edytor ezHTML jest niestety bardzo prostym narzędziem i nie oferuje wsparcia dla najbardziej

zaawansowanych możliwości tabel. Nie jest to jednak duże ograniczenie, gdyż z powodzeniem

można wszystkie informacje wpisać ręcznie, ucząc się przy okazji zasady ich funkcjonowania.

HTML

W

EB

M

AS

TE

RIN

G

<td>1</td> <td>Procesor</td>
<td>Intel Pentium D 820 (S775) 2.80 GHz</td>
<td>1</td> <td>980.00</td>

</tr>

...

<tr>

<td colspan=”4”>Razem</td> <td>4160,57</td>

</tr>

</tbody> </table>

Na rys. 4 możemy zobaczyć jak będzie wyglądać taki kod

w przeglądarce internetowej. Od razu rzuca się w oczy to, że

stopka mimo iż została zdeklarowana zaraz pod nagłówkiem, wy-

świetlana jest na samym dole tabeli.

Wszystkie te trzy bloki (<thead>, <tfoot>, oraz <tbody>)

mogą przyjmować cztery atrybuty –

align

,

char

,

charoff

, oraz

va-

lign

. Niestety, tak jak w przypadku znaczników <colgroup> oraz

<col>, tak i tutaj przeglądarki nie potrafią jeszcze poprawnie

zinterpretować atrybutów

charoff

oraz

char

.

Podział tabeli na trzy bloki – nagłówek, stopkę oraz ciało tabeli

– jest szczególnie pomocne przy druku długich tabel. Dzięki wy-

raźnemu podziałowi na bloki, przeglądarka podczas wydruku doda-

je do tabeli nagłówek oraz stopkę na każdej stronie wydruku. Po-

woduje to znaczną poprawę czytelności tak wydrukowanej strony.

Oczywiście można także za pomocą stylów osobno sformatować

każdy z tych bloków.

Dodatkowe atrybuty znacznika <table>

Gdy umiemy już podzielić tabele na grupy, dowiemy się w jaki spo-

sób można wyróżnić bloki, ustawiając odpowiednio obramowanie

pomiędzy komórkami. Służą do tego dwa dodatkowe atrybuty

znacznika <table> – frame oraz rules.

Atrybut

frame

służy do określenia wyglądu zewnętrznego obra-

mowania tabeli (wymaga on podania także parametru border o-

kreślającego szerokość obramowania). Może przyjąć jedną z na-

stępujących dziewięciu wartości:

4

void – oznacza, że wszystkie krawędzie tabeli mają pozostać

niewidoczne,

4

above – nakazuje wyświetlanie jedynie górnej krawędzi tabeli,

4

below – nakazuje wyświetlanie jedynie dolnej krawędzi tabeli,

4

hsides – nakazuje wyświetlanie zarówno górnej, jak i dolnej

krawędzi tabeli,

4

lhs – nakazuje wyświetlanie lewej krawędzi tabeli,

4

rhs – nakazuje wyświetlanie prawej krawędzi tabeli,

4

vsides – nakazuje wyświetlanie zarówno lewej jak i prawej

krawędzi tabeli,

4

box – powoduje wszystkich krawędzi tabeli,

4

border – ma takie samo działanie jak wartość

box

.

Atrybut

rules

natomiast definiuje obramowanie znajdujące się

pomiędzy komórkami tabeli. Przyjmuje jedną z poniższych wartości:

4

none – oznacza, że wszystkie wewnętrzne krawędzie tabeli

mają pozostać niewidoczne,

4

groups – określa, że linie mają zostać wyświetlane jedynie

pomiędzy grupami <thead>, <tfoot>, <tbody>, <col-

group> oraz <col>,

4

rows – nakazuje wyświetlanie linii jedynie pomiędzy wiersza-

mi tabeli,

4

cols – nakazuje wyświetlanie linii jedynie pomiędzy komórka-

mi tabeli,

4

all – nakazuje wyświetlanie wszystkich (pomiędzy wszystkimi

wierszami oraz komórkami tabeli).

Na rys. 5 znajduje się przykład działania kilku wybranych war-

tości obu atrybutów. Zapoznanie się z działaniem pozostałych

wartości pozostawiamy Czytelnikom.

n

>>

Rys. 5

Przykład

działania

atrybutów

frame oraz

rules

znacznika

<table>

>>

Rys. 4.

Wsparcie dla tabel w edytorze EzHTML

4

5

INTERNET.maj.2006

www.mi.com.pl

91

Chcesz wiedzieć więcej? Odwiedź nasze forum:

http://forum.mi.com.pl