HTML

HTML

TABELE

TABELE

C

M

Y

K

Struktura tabeli HTML

Tabela HTML sk³ada siê z wierszy podzielonych na komórki. Ca³¹
tabelê otaczamy znacznikami <TABLE> oraz </TABLE>,
wewn¹trz umieszczaj¹c wiersze. Do definiowania wierszy stosuje-
my znaczniki <TR> i </TR>. Nazwa znacznika TR jest skrótem
Table Row – wiersz tabeli. Komórki umieszczamy pomiêdzy <TD>
oraz </TD> (ang. Table Data – dane tabeli). Przyst¹pmy do wyko-
nania pierwszej tabeli.

Æ

WICZENIE

1

Wykonaj tabelê widoczn¹ na rysunku 1.

Rys. 1. Tabela 2x2

Tabela ta sk³ada siê z dwóch

wierszy oraz dwóch kolumn. Po
umieszczeniu w treœci strony (tj.
pomiêdzy znacznikami BODY)
znaczników TABLE przechodzimy
do ustalenia zawartoœci tabeli.

Znacznikami TR definiujemy pierwszy wiersz, w którym umiesz-
czamy dwie komórki. Komórki otaczamy znacznikami <TD> oraz
</TD>. W treœci komórek wprowadzamy litery A oraz B. Poni¿ej
pierwszego wiersza (tj. pod znacznikiem </TR>, ale przed znaczni-
kiem </TABLE>) umieszczamy kod drugiego wiersza tabeli. Kod
drugiego wiersza ró¿ni siê jedynie zawartoœci¹ komórek TD. Oto
kod, jaki powinniœmy otrzymaæ:

<TABLE border=”1”>

<TR>

<TD>A</TD>
<TD>B</TD>

</TR>
<TR>

<TD>C</TD>
<TD>D</TD>

</TR>

</TABLE>

Zauwa¿my, ¿e znacznik otwieraj¹cy tabelê posiada atrybut bor-

der=”1”. Atrybut ten w³¹cza widocznoœæ krawêdzi tabeli. Jest on wy-
godny do sprawdzania poprawnoœci kodu HTML. W³¹czaj¹c widocz-
noœæ wszystkich krawêdzi tabeli widzimy czy komórki tworz¹ zapla-
nowany przez nas uk³ad.

Æ

WICZENIE

2

Wykonaj tabelê o trzech wierszach i jednej kolumnie (3x1). W komór-
kach umieϾ litery X, Y, Z.

Rys. 2. Tabela 3x1

Poniewa¿ tabela ma zawieraæ trzy wiersze, zatem

musimy trzykrotnie u¿yæ elementu TR. Ka¿dy wiersz
zawiera jedn¹ komórkê, wiêc wewn¹trz elementów
TR umieszczamy po jednym elemencie TD. Oto wy-
nikowy kod:

<TABLE border=”1”>

<TR><TD>X</TD></TR>
<TR><TD>Y</TD></TR>
<TR><TD>Z</TD></TR>

</TABLE>

Æ

WICZENIE

3

Wykonaj tabelê o dwóch wierszach i piêciu kolumnach (2x5).
W komórkach umieœæ kolejne liczby naturalne.

HTML

INTERNET.grudzieñ.2004

108

Jednym

z najwa¿niejszych

kroków nauki

jêzyka HTML

jest opanowanie

umiejêtnoœci

tworzenia tabel.

Tabele

wprowadzone

do jêzyka

w celu u³atwienia

prezentacji

danych obecnie

stanowi¹ g³ówne

narzêdzie

do projektowania

uk³adu

graficznego.

W³odzimierz Gajda

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

!

HTML

Wszystkie przykłady opisane w artykule

znajdują się na dołączonej

płycie CD w katalogu Warsztat_HTML.

C

M

Y

K

Selektorem powy¿szej definicji stylu s¹ dwa znaczniki: TABLE

i TD. Decyduje o tym znak przecinka znajduj¹cy siê pomiêdzy znacz-
nikami. Podana definicja bêdzie siê odnosi³a do wszystkich elementów
TABLE oraz TD, jakie wystêpuj¹ w dokumencie. Oczywiœcie defini-
cjê tak¹ mo¿emy równie¿ napisaæ w nieco d³u¿szej postaci:

TABLE {

border: solid black 2px;

}

TD {

border: solid black 2px;

}

Jeszcze inny sposób zapisu podanych wartoœci polega na rozbiciu

atrybutu border na atrybuty border-style, border-width oraz border-color:

TABLE, TD {

border-style: solid;
border-width: 2px;
border-color: black;

}

Atrybut border-width ustala oczywiœcie gruboœæ krawêdzi, zaœ bor-

der-color – kolor. Natomiast atrybut border-style okreœla rodzaj linii.
Dopuszczalnymi wartoœciami s¹: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset oraz outset.

Zwróæmy równie¿ uwagê na mo¿liwoœæ ustalania ró¿nego formatu

krawêdzi lewej, prawej, dolnej i górnej z osobna. Do tego celu mo¿e-
my u¿yæ czterech atrybutów: border-left, border-right, border-top
i border-bottom, lub dwunastu atrybutów postaci: border-right-style,
border-right-width, border-right-color (s³owo right zastêpujemy s³owa-
mi left, top lub bottom).

Æ

WICZENIE

5

Przygotuj dwie tabele przedstawiaj¹ce zestawienie jednostek wzglêd-
nych i bezwzglêdnych stosowanych w arkuszach stylów. Stronê wzbo-
gaæ o style uwidaczniaj¹ce krawêdzie tabeli, zaœ komórki nag³ówkowe
napisz czcionk¹ wyt³uszczon¹.

Rys. 5. Krawêdzie tabeli zmodyfikowane

stylami

Tabele, które mamy przygotowaæ, s¹

widoczne na rys. 5. Ka¿da z nich zawiera
dwie kolumny. W pierwszej kolumnie
umieszczamy nazwê jednostki, a w dru-
giej jej opis. Nazwê jednostki wyt³uœcimy
stosuj¹c elementy STRONG. Pierwsza
z tabel bêdzie mia³a nastêpuj¹cy kod:

<TABLE>

<TR>

<TD><STRONG>em</STRONG></TD>
<TD>wielkoϾ danej czcionki</TD>

</TR>
<TR>

<TD><STRONG>ex</STRONG></TD>
<TD>(x-height) wysokoϾ danej czcionki</TD>

</TR>
<TR>

<TD><STRONG>px</STRONG></TD>
<TD>piksel danego monitora</TD>

</TR>

</TABLE>

Druga tabela ró¿ni siê jedynie liczb¹ wierszy oraz danymi zawarty-

mi w tabeli. Dodaj¹c do dokumentu opisane wczeœniej style otrzyma-
my witrynê przedstawion¹ na rysunku 5.

Rys. 3. Tabela 2x5

Wewn¹trz elementu TABLE umieszczamy dwa elementy TR. Ka¿-

dy z wierszy zawiera piêæ elementów TD:

<TABLE border=”1”>
<TR>

<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>

</TR>
<TR>

<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>

</TR>

</TABLE>

Wspomniany atrybut border uwidacznia krawêdzie tabeli. Dziêki temu

mo¿emy stwierdziæ, czy tworzona tabela jest zgodna z oczekiwaniami.
Jednak format krawêdzi pozostawia wiele do ¿yczenia. PrzejdŸmy zatem
do ustalenia stylów, nadaj¹cych odpowiedni format krawêdziom.

Definiowanie stylu obramowania

Obramowanie tabeli definiujemy ustalaj¹c odpowiednie style.
Rozpocznijmy od zbadania formatu tabeli pozbawionej atrybutu border.

Æ

WICZENIE

4

Wykonaj tabelê prezentuj¹c¹ najd³u¿sze rzeki œwiata. W tabeli umieœæ
oprócz nazwy rzeki tak¿e jej d³ugoœæ oraz powierzchniê dorzecza.

Rys. 4. Tabela z podpisem

CAPTION i bez atrybutu border

W pierwszym wierszu tabeli

umieœcimy nazwy kolumn,
a w pozosta³ych informacje o rze-
kach. Dane ka¿dej rzeki znajd¹ siê
w osobnym wierszu tabeli.
W æwiczeniu tym wprowadzimy
kolejny element jêzyka HTML
zwi¹zany z tabelami. Znaczniki
<CAPTION> oraz </CAPTION>
wzbogacaj¹ tabelê o podpis. Nale-
¿y pamiêtaæ, by umieszczaæ je
bezpoœrednio po znaczniku
<TABLE> otwieraj¹cym tabelê.

Wygl¹d tabeli zosta³ przed-

stawiony na rys. 4, zaœ listing 1

(na CD) prezentuje kilka pierwszych wierszy kodu HTML.

Zauwa¿my, ¿e domyœlnie, krawêdzie tabeli nie s¹ widoczne. W jaki

zatem sposób uwidoczniæ krawêdzie tabeli? Nale¿y dokument wzbo-
gaciæ o definicjê stylów, zmieniaj¹c¹ wartoœæ atrybutu border znaczni-
kom TABLE oraz TD:

TABLE, TD {

border: solid black 2px;

}

HTML

INTERNET.grudzieñ.2004

109

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

"

C

M

Y

K

Krawêdzie widoczne na rysunku 5 s¹ nieco dziwne. Otaczaj¹ ca³¹

tabelê oraz ka¿d¹ komórkê, przy czym krawêdzie s¹siaduj¹cych komó-
rek nie ³¹cz¹ siê. W celu z³¹czenia krawêdzi tabeli nale¿y u¿yæ atrybu-
tu border-collapse. Nadaj¹c mu wartoœæ collapse wymusimy ³¹czenie
krawêdzi s¹siaduj¹cych komórek.

Æ

WICZENIE

6

Przygotuj stronê z zestawieniem wielokrotnoœci jednostek. Tabelê
sformatuj tak, jak na rysunku 6.

Rys. 6. Tabela o „z³¹czonych”

krawêdziach

Najpierw przygotowujemy

kod tabeli. Tabela ta posiada trzy
kolumny i szesnaœcie wierszy.
Pierwszy wiersz jest wierszem
nag³ówkowym, a pozosta³e za-
wieraj¹ dane. Format wszystkich
wierszy z danymi jest identycz-
ny, ale ró¿ni siê od formatu wier-
sza nag³ówkowego. W celu
wprowadzenia innego formatu
w pierwszym wierszu wykorzy-

stamy element TH (ang. Table Header – nag³ówek tabeli). Kod dwóch
pocz¹tkowych wierszy tabeli jest nastêpuj¹cy:

<TABLE>

<TR>

<TH>Przedrostek</TH>
<TH>Oznaczenie</TH>
<TH>WielokrotnoϾ, podwielokrotnoϾ</TH>

</TR>
<TR>

<TD>tera-</TD>
<TD>T</TD>
<TD>10<SUP>12</SUP> = 1 000 000 000 000</TD>

</TR>

...
<TABLE>

Dodaj¹c poni¿sze definicje stylów:

TABLE {

border-collapse: collapse;
border: solid 2px black;

}
TD {

border: solid 1px black;
padding: 5px;

}
TH {

border: solid 1px black;
color: white;
background: black;
font-weight: bolder;
font-size: 12pt;
padding: 15px;

}

otrzymamy witrynê przedstawion¹ na rysunku 6. T³o komórek na-
g³ówkowych zmienia wpis background: black;, zaœ atrybut padding
zwiêksza iloœæ miejsca otaczaj¹cego zawartoœæ komórki.

Klasy znaczników

W æwiczeniu 6 spotkaliœmy siê po raz pierwszy z sytuacj¹, w której
pewne komórki (tj. komórki nag³ówka) maj¹ mieæ inny format od
pozosta³ych. Co zrobiæ, gdy w tabeli pojawia siê wiêksza liczba te-

go typu komórek? Problem ten rozwi¹¿emy stosuj¹c klasy znaczni-
ków. Jest to metoda pozwalaj¹ca niejako na zdefiniowanie nowych
znaczników. Wprowadzane znaczniki ró¿ni¹ siê od istniej¹cych
formatem.

Dokonujemy tego korzystaj¹c z atrybutu class. Atrybut ten mo¿e-

my stosowaæ w odniesieniu do ka¿dego elementu jêzyka HTML. Jeœli
chcemy wprowadziæ nowy format dla pewnych elementów TD, nale¿y
nadaæ im klasê, np. tytul:

<TD class=”tytul”>
zawartoϾ
</TD>

Format takiego elementu ustalamy stosuj¹c selektor TD.tytul:

TD.tytul {

definicje stylów...

}

W podobny sposób mo¿emy zdefiniowaæ styl elementu STRONG,

umieszczaj¹c w kodzie HTML klasê:

<STRONG class=”plik”>php.ini</STRONG>
zaœ w arkuszach stylów ustalaj¹c format:
STRONG.plik {

...style...

}

W dokumencie mo¿e pojawiæ siê dowolna liczba znaczników po-

siadaj¹cych tê sam¹ nazwê klasy, na przyk³ad piêæ znaczników
STRONG wspomnianej klasy plik. Dopuszczalne jest równie¿ stoso-
wanie tej samej nazwy klasy w odniesieniu do ró¿nych znaczników.
Kontynuuj¹c przyk³ad klasy plik, moglibyœmy w dokumencie umie-
œciæ znaczniki:

<EM class=”plik”>ala</EM>
<P class=”plik”>ma</P>
<TABLE class=”plik”>kota</TABLE>

Definiuj¹c style powy¿szych znaczników zastosujemy selektory:

EM.plik, P.plik oraz TABLE.plik. Mo¿emy równie¿ u¿yæ selektora .plik:

.plik {

...style...

}

Selektor taki bêdzie modyfikowa³ format wszystkich znaczników

klasy plik.

Æ

WICZENIE

7

Przygotuj stronê pt. „Pies-Kot” zawieraj¹c¹ tabelê o dwóch komór-
kach. Ka¿dej komórce nadaj odmienny kolor t³a.

Rys. 7. Komórki o ró¿nych

formatach

Tabela z rys. 7 posiada

dwa wiersze i jedn¹ kolumnê.
Ustalamy nazwê klasy górnej

komórki tabeli na kot, zaœ dolnej na pies. Kod HTML tabeli bêdzie na-
stêpuj¹cy:

<TABLE>

<TR><TD class=”kot”>KOT</TD></TR>
<TR><TD class=”pies”>PIES</TD></TR>

</TABLE>

Teraz przechodzimy do definicji stylów. Zmieniamy kolor t³a

ka¿dej komórki z osobna:

TD.kot {

background: lightgreen;

}

TD.pies {

background: yellow;

}

HTML

INTERNET.grudzieñ.2004

110

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

!

Æ

WICZENIE

8

Stosuj¹c klasy znaczników przygotuj tabele o kolorystyce odpowiada-
j¹cej flagom Francji, Niemiec i W³och.

Rys. 8. Flagi – modyfikacja t³a i szerokoœci
komórek

Flagi s¹ w istocie tabelami, które przed-

stawiaj¹ jedynie kolor t³a. Komórki nie za-
wieraj¹ ¿adnych danych. W takim przypad-
ku, wewn¹trz komórek, nale¿y umieœciæ
spacjê &nbsp;. W przeciwnym bowiem ra-
zie t³o komórki nie zostanie wyœwietlone.
Ponadto nale¿y zmodyfikowaæ szerokoœæ
komórki, stosuj¹c atrybut width.

Ka¿da z flag przedstawionych na rysunku

jest w istocie tabel¹ o trzech wierszach i jed-
nej kolumnie. Oto kod flagi francuskiej:

<TABLE>

<TR><TD class=”niebieski”>&nbsp;</TD></TR>
<TR><TD class=”bialy”>&nbsp;</TD></TR>
<TR><TD class=”czerwony”>&nbsp;</TD></TR>

</TABLE>

W stylach modyfikujemy szerokoœæ wszystkich komórek tabeli

(bez wzglêdu na klasê; tak¿e tych bez przypisanej nazwy klasy):

TD {

width: 150px;

}

a tak¿e dodajemy klasy maj¹ce na celu pokolorowanie flagi:

TD.niebieski {

color: rgb(0,0,0);
background: rgb(59,66,215);

}

Stosuj¹c przedstawione informacje mo¿emy przyst¹piæ do wykona-

nia dwóch, nieco bardziej rozbudowanych æwiczeñ.

Æ

WICZENIE

9

Przygotuj witrynê prezentuj¹c¹ dane na temat kodu paskowego rezy-
storów, widoczn¹ na rysunku 9 (patrz CD).

Rys. 9. Kod paskowy rezystorów

Æ

WICZENIE

10

Przygotuj witrynê prezentuj¹c¹ wyniki spotkañ eliminacyjnych grupy 5.
eliminacji mistrzostw œwiata, przedstawion¹ na rysunku 10 (patrz CD).

Rys. 10. Eliminacje pi³karskich mistrzostw œwiata Korea

i Japonia 2002

Atrybuty colspan oraz rowspan

Tabele omówione w æwiczeniach 1-10 charakteryzuje bardzo prosta struk-
tura. Ka¿dy wiersz zawiera identyczn¹ liczbê komórek. Równie¿ ka¿da
z kolumn ma identyczn¹ liczbê komórek. Gdy tabela zawiera komórki roz-
ci¹gaj¹ce siê na kilka wierszy lub kolumn, nale¿y u¿yæ atrybutów colspan
oraz rowspan. Atrybuty te nadajemy komórkom TD lub TH. Wartoœciami
atrybutów s¹ liczby ca³kowite, które okreœlaj¹ liczbê wierszy lub kolumn
na jakie rozci¹ga siê dana komórka. Jeœli utworzymy komórkê:

<TD colspan=”3”>
...
</TD>

to komórka ta bêdzie siê rozci¹ga³a na trzy kolejne kolumny.
Podobnie, komórka:

<TD rowspan=”5”>
...
</TD>

rozci¹ga siê na piêæ wierszy.

Æ

WICZENIE

11

Wykonaj tabelê przedstawion¹ na rysunku 11. W tabeli tej komórka
o etykiecie A rozci¹ga siê na dwie kolumny.

Rys. 11. Komórka A rozci¹ga siê na dwie

kolumny

Przygotowujemy tabelê o dwóch wierszach

i dwóch kolumnach. Tabela taka by³a omó-

wiona w æwiczeniu 1. Nastêpnie pierwszej komórce w pierwszym
wierszu dodajemy atrybut colspan, zaœ drug¹ komórkê z pierwszego
wiersza usuwamy. Otrzymamy kod:

<TABLE>

<TR>

<TD colspan=”2”>A</TD>

</TR>
<TR>

<TD>B</TD>
<TD>C</TD>

</TR>

</TABLE>

Zwróæmy uwagê na fakt, ¿e w kodzie HTML wystêpuje odpowied-

nio mniej komórek. Pierwsza komórka rozci¹ga siê na dwie kolumny.
St¹d w kodzie pierwszego wiersza wystêpuje o jedn¹ komórkê mniej
ni¿ w kodzie wiersza drugiego.

n

Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem

http://www.gajdaw.pl.

HTML

INTERNET.grudzieñ.2004

111

WARSZTAT

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

"

C

M

Y

K