HTML - Tabele HTML 12-2004, Dokumenty i gry
[ Pobierz całość w formacie PDF ]
C
M
Y
K
NA CD
NEWSY
Z OKýADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
8
HTML
HTML
Struktura tabeli HTML
Tabela HTML skþada siħ z wierszy podzielonych na komrki. 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 skrtem
Table Row Î wiersz tabeli. Komrki 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.
Jednym
Rys. 1.
Tabela 2x2
Tabela ta skþada siħ z dwch
wierszy oraz dwch kolumn. Po
umieszczeniu w treĻci strony (tj.
pomiħdzy znacznikami BODY)
znacznikw TABLE przechodzimy
do ustalenia zawartoĻci tabeli.
Znacznikami TR definiujemy pierwszy wiersz, w ktrym umiesz-
czamy dwie komrki. Komrki otaczamy znacznikami <TD> oraz
</TD>. W treĻci komrek 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Ģ komrek 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 komrki tworzĢ zapla-
nowany przez nas ukþad.
z najwaŇniejszych
krokw 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
Ę
WICZENIE
2
Wykonaj tabelħ o trzech wierszach i jednej kolumnie (3x1). W komr-
kach umieĻę litery X, Y, Z.
ukþadu
graficznego.
Rys. 2.
Tabela 3x1
Wþodzimierz Gajda
PoniewaŇ tabela ma zawieraę trzy wiersze, zatem
musimy trzykrotnie uŇyę elementu TR. KaŇdy wiersz
zawiera jednĢ komrkħ, wiħc wewnĢtrz elementw
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 dwch wierszach i piħciu kolumnach (2x5).
W komrkach umieĻę kolejne liczby naturalne.
108
Wszystkie przykłady opisane w artykule
znajdują się na dołączonej
płycie CD w katalogu Warsztat_HTML.
INTERNET.grudzieı.2004
HTML
C
M
Y
K
7
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OKýADKI
NEWSY
NA CD
HTML
Rys. 3.
Tabela 2x5
WewnĢtrz elementu TABLE umieszczamy dwa elementy TR. KaŇ-
dy z wierszy zawiera piħę elementw 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 stylw, nadajĢcych odpowiedni format krawħdziom.
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 elementw
TABLE oraz TD, jakie wystħpujĢ w dokumencie. OczywiĻcie defini-
cjħ takĢ moŇemy rwnieŇ napisaę w nieco dþuŇszej postaci:
TABLE {
border: solid black 2px;
}
TD {
border: solid black 2px;
}
Jeszcze inny sposb 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 rwnieŇ uwagħ na moŇliwoĻę ustalania rŇnego formatu
krawħdzi lewej, prawej, dolnej i grnej z osobna. Do tego celu moŇe-
my uŇyę czterech atrybutw: border-left, border-right, border-top
i border-bottom, lub dwunastu atrybutw postaci: border-right-style,
border-right-width, border-right-color (sþowo right zastħpujemy sþowa-
mi left, top lub bottom).
Definiowanie stylu obramowania
Obramowanie tabeli definiujemy ustalajĢc odpowiednie style.
Rozpocznijmy od zbadania formatu tabeli pozbawionej atrybutu border.
Ę
WICZENIE
5
Przygotuj dwie tabele przedstawiajĢce zestawienie jednostek wzglħd-
nych i bezwzglħdnych stosowanych w arkuszach stylw. Stronħ wzbo-
gaę o style uwidaczniajĢce krawħdzie tabeli, zaĻ komrki nagþwkowe
napisz czcionkĢ wytþuszczonĢ.
Rys. 5.
Krawħdzie tabeli zmodyfikowane
stylami
Ę
WICZENIE
4
Wykonaj tabelħ prezentujĢcĢ najdþuŇsze rzeki Ļwiata. W tabeli umieĻę
oprcz nazwy rzeki takŇe jej dþugoĻę oraz powierzchniħ dorzecza.
Rys. 4.
Tabela z podpisem
CAPTION i bez atrybutu border
Tabele, ktre 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:
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 sposb uwidocznię krawħdzie tabeli? NaleŇy dokument wzbo-
gacię o definicjħ stylw, zmieniajĢcĢ wartoĻę atrybutu border znaczni-
kom TABLE oraz TD:
TABLE, TD {
border: solid black 2px;
<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.
}
INTERNET.grudzieı.2004
109
C
M
Y
K
NA CD
NEWSY
Z OKýADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
8
HTML
Krawħdzie widoczne na rysunku 5 sĢ nieco dziwne. OtaczajĢ caþĢ
tabelħ oraz kaŇdĢ komrkħ, 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 komrek.
go typu komrek? Problem ten rozwiĢŇemy stosujĢc klasy znaczni-
kw. Jest to metoda pozwalajĢca niejako na zdefiniowanie nowych
znacznikw. 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 elementw 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 stylw...
Ę
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 dwch
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 stylw:
TABLE {
border-collapse: collapse;
border: solid 2px black;
}
W podobny sposb moŇemy zdefiniowaę styl elementu STRONG,
umieszczajĢc w kodzie HTML klasħ:
<STRONG class=ÑplikÑ>php.ini</STRONG>
zaĻ w arkuszach stylw ustalajĢc format:
STRONG.plik {
...style...
}
W dokumencie moŇe pojawię siħ dowolna liczba znacznikw po-
siadajĢcych tħ samĢ nazwħ klasy, na przykþad piħę znacznikw
STRONG wspomnianej klasy plik. Dopuszczalne jest rwnieŇ stoso-
wanie tej samej nazwy klasy w odniesieniu do rŇnych znacznikw.
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 znacznikw zastosujemy selektory:
EM.plik, P.plik oraz TABLE.plik. MoŇemy rwnieŇ uŇyę selektora .plik:
.plik {
...style...
}
Selektor taki bħdzie modyfikowaþ format wszystkich znacznikw
klasy plik.
Ę
WICZENIE
7
Przygotuj stronħ pt. áPies-KotÑ zawierajĢcĢ tabelħ o dwch komr-
kach. KaŇdej komrce nadaj odmienny kolor tþa.
Rys. 7.
Komrki o rŇnych
formatach
}
TD {
border: solid 1px black;
padding: 5px;
Tabela z rys. 7 posiada
dwa wiersze i jednĢ kolumnħ.
Ustalamy nazwħ klasy grnej
komrki 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 stylw. Zmieniamy kolor tþa
kaŇdej komrki z osobna:
TD.kot {
background: lightgreen;
}
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 komrek na-
gþwkowych zmienia wpis background: black;, zaĻ atrybut padding
zwiħksza iloĻę miejsca otaczajĢcego zawartoĻę komrki.
}
Klasy znaczników
W ęwiczeniu 6 spotkaliĻmy siħ po raz pierwszy z sytuacjĢ, w ktrej
pewne komrki (tj. komrki nagþwka) majĢ mieę inny format od
pozostaþych. Co zrobię, gdy w tabeli pojawia siħ wiħksza liczba te-
TD.pies {
background: yellow;
}
110
INTERNET.grudzieı.2004
C
M
Y
K
7
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OKýADKI
NEWSY
NA CD
HTML
Ę
WICZENIE
8
StosujĢc klasy znacznikw przygotuj tabele o kolorystyce odpowiada-
jĢcej flagom Francji, Niemiec i Wþoch.
Rys. 8.
Flagi Î modyfikacja tþa i szerokoĻci
komrek
Ę
WICZENIE
10
Przygotuj witrynħ prezentujĢcĢ wyniki spotkaı eliminacyjnych grupy 5.
eliminacji mistrzostw Ļwiata, przedstawionĢ na rysunku 10 (patrz CD).
Flagi sĢ w istocie tabelami, ktre przed-
stawiajĢ jedynie kolor tþa. Komrki nie za-
wierajĢ Ňadnych danych. W takim przypad-
ku, wewnĢtrz komrek, naleŇy umieĻcię
spacjħ . W przeciwnym bowiem ra-
zie tþo komrki nie zostanie wyĻwietlone.
Ponadto naleŇy zmodyfikowaę szerokoĻę
komrki, 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:
Rys. 10.
Eliminacje piþkarskich mistrzostw Ļwiata Korea
i Japonia 2002
<TABLE>
<TR><TD class=ÑniebieskiÑ> </TD></TR>
<TR><TD class=ÑbialyÑ> </TD></TR>
<TR><TD class=ÑczerwonyÑ> </TD></TR>
</TABLE>
Atrybuty colspan oraz rowspan
Tabele omwione w ęwiczeniach 1-10 charakteryzuje bardzo prosta struk-
tura. KaŇdy wiersz zawiera identycznĢ liczbħ komrek. RwnieŇ kaŇda
z kolumn ma identycznĢ liczbħ komrek. Gdy tabela zawiera komrki roz-
ciĢgajĢce siħ na kilka wierszy lub kolumn, naleŇy uŇyę atrybutw colspan
oraz rowspan. Atrybuty te nadajemy komrkom TD lub TH. WartoĻciami
atrybutw sĢ liczby caþkowite, ktre okreĻlajĢ liczbħ wierszy lub kolumn
na jakie rozciĢga siħ dana komrka. JeĻli utworzymy komrkħ:
<TD colspan=Ñ3Ñ>
...
</TD>
to komrka ta bħdzie siħ rozciĢgaþa na trzy kolejne kolumny.
Podobnie, komrka:
<TD rowspan=Ñ5Ñ>
...
</TD>
rozciĢga siħ na piħę wierszy.
W stylach modyfikujemy szerokoĻę wszystkich komrek 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 dwch, nieco bardziej rozbudowanych ęwiczeı.
Ę
WICZENIE
9
Przygotuj witrynħ prezentujĢcĢ dane na temat kodu paskowego rezy-
storw, widocznĢ na rysunku 9 (patrz CD).
Ę
WICZENIE
11
Wykonaj tabelħ przedstawionĢ na rysunku 11. W tabeli tej komrka
o etykiecie A rozciĢga siħ na dwie kolumny.
Rys. 11.
Komrka A rozciĢga siħ na dwie
kolumny
Przygotowujemy tabelħ o dwch wierszach
i dwch kolumnach. Tabela taka byþa om-
wiona w ęwiczeniu 1. Nastħpnie pierwszej komrce w pierwszym
wierszu dodajemy atrybut colspan, zaĻ drugĢ komrkħ 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 komrek. Pierwsza komrka rozciĢga siħ na dwie kolumny.
StĢd w kodzie pierwszego wiersza wystħpuje o jednĢ komrkħ mniej
niŇ w kodzie wiersza drugiego.
n
Rys. 9.
Kod paskowy rezystorw
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem
INTERNET.grudzieı.2004
111
[ Pobierz całość w formacie PDF ]
zanotowane.pl doc.pisz.pl pdf.pisz.pl chiara76.opx.pl
C
M
Y
K
NA CD
NEWSY
Z OKýADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
8
HTML
HTML
Struktura tabeli HTML
Tabela HTML skþada siħ z wierszy podzielonych na komrki. 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 skrtem
Table Row Î wiersz tabeli. Komrki 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.
Jednym
Rys. 1.
Tabela 2x2
Tabela ta skþada siħ z dwch
wierszy oraz dwch kolumn. Po
umieszczeniu w treĻci strony (tj.
pomiħdzy znacznikami BODY)
znacznikw TABLE przechodzimy
do ustalenia zawartoĻci tabeli.
Znacznikami TR definiujemy pierwszy wiersz, w ktrym umiesz-
czamy dwie komrki. Komrki otaczamy znacznikami <TD> oraz
</TD>. W treĻci komrek 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Ģ komrek 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 komrki tworzĢ zapla-
nowany przez nas ukþad.
z najwaŇniejszych
krokw 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
Ę
WICZENIE
2
Wykonaj tabelħ o trzech wierszach i jednej kolumnie (3x1). W komr-
kach umieĻę litery X, Y, Z.
ukþadu
graficznego.
Rys. 2.
Tabela 3x1
Wþodzimierz Gajda
PoniewaŇ tabela ma zawieraę trzy wiersze, zatem
musimy trzykrotnie uŇyę elementu TR. KaŇdy wiersz
zawiera jednĢ komrkħ, wiħc wewnĢtrz elementw
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 dwch wierszach i piħciu kolumnach (2x5).
W komrkach umieĻę kolejne liczby naturalne.
108
Wszystkie przykłady opisane w artykule
znajdują się na dołączonej
płycie CD w katalogu Warsztat_HTML.
INTERNET.grudzieı.2004
HTML
C
M
Y
K
7
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OKýADKI
NEWSY
NA CD
HTML
Rys. 3.
Tabela 2x5
WewnĢtrz elementu TABLE umieszczamy dwa elementy TR. KaŇ-
dy z wierszy zawiera piħę elementw 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 stylw, nadajĢcych odpowiedni format krawħdziom.
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 elementw
TABLE oraz TD, jakie wystħpujĢ w dokumencie. OczywiĻcie defini-
cjħ takĢ moŇemy rwnieŇ napisaę w nieco dþuŇszej postaci:
TABLE {
border: solid black 2px;
}
TD {
border: solid black 2px;
}
Jeszcze inny sposb 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 rwnieŇ uwagħ na moŇliwoĻę ustalania rŇnego formatu
krawħdzi lewej, prawej, dolnej i grnej z osobna. Do tego celu moŇe-
my uŇyę czterech atrybutw: border-left, border-right, border-top
i border-bottom, lub dwunastu atrybutw postaci: border-right-style,
border-right-width, border-right-color (sþowo right zastħpujemy sþowa-
mi left, top lub bottom).
Definiowanie stylu obramowania
Obramowanie tabeli definiujemy ustalajĢc odpowiednie style.
Rozpocznijmy od zbadania formatu tabeli pozbawionej atrybutu border.
Ę
WICZENIE
5
Przygotuj dwie tabele przedstawiajĢce zestawienie jednostek wzglħd-
nych i bezwzglħdnych stosowanych w arkuszach stylw. Stronħ wzbo-
gaę o style uwidaczniajĢce krawħdzie tabeli, zaĻ komrki nagþwkowe
napisz czcionkĢ wytþuszczonĢ.
Rys. 5.
Krawħdzie tabeli zmodyfikowane
stylami
Ę
WICZENIE
4
Wykonaj tabelħ prezentujĢcĢ najdþuŇsze rzeki Ļwiata. W tabeli umieĻę
oprcz nazwy rzeki takŇe jej dþugoĻę oraz powierzchniħ dorzecza.
Rys. 4.
Tabela z podpisem
CAPTION i bez atrybutu border
Tabele, ktre 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:
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 sposb uwidocznię krawħdzie tabeli? NaleŇy dokument wzbo-
gacię o definicjħ stylw, zmieniajĢcĢ wartoĻę atrybutu border znaczni-
kom TABLE oraz TD:
TABLE, TD {
border: solid black 2px;
<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.
}
INTERNET.grudzieı.2004
109
C
M
Y
K
NA CD
NEWSY
Z OKýADKI
FIRMA
MAGAZYN
PROGRAMY
WARSZTAT
8
HTML
Krawħdzie widoczne na rysunku 5 sĢ nieco dziwne. OtaczajĢ caþĢ
tabelħ oraz kaŇdĢ komrkħ, 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 komrek.
go typu komrek? Problem ten rozwiĢŇemy stosujĢc klasy znaczni-
kw. Jest to metoda pozwalajĢca niejako na zdefiniowanie nowych
znacznikw. 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 elementw 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 stylw...
Ę
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 dwch
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 stylw:
TABLE {
border-collapse: collapse;
border: solid 2px black;
}
W podobny sposb moŇemy zdefiniowaę styl elementu STRONG,
umieszczajĢc w kodzie HTML klasħ:
<STRONG class=ÑplikÑ>php.ini</STRONG>
zaĻ w arkuszach stylw ustalajĢc format:
STRONG.plik {
...style...
}
W dokumencie moŇe pojawię siħ dowolna liczba znacznikw po-
siadajĢcych tħ samĢ nazwħ klasy, na przykþad piħę znacznikw
STRONG wspomnianej klasy plik. Dopuszczalne jest rwnieŇ stoso-
wanie tej samej nazwy klasy w odniesieniu do rŇnych znacznikw.
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 znacznikw zastosujemy selektory:
EM.plik, P.plik oraz TABLE.plik. MoŇemy rwnieŇ uŇyę selektora .plik:
.plik {
...style...
}
Selektor taki bħdzie modyfikowaþ format wszystkich znacznikw
klasy plik.
Ę
WICZENIE
7
Przygotuj stronħ pt. áPies-KotÑ zawierajĢcĢ tabelħ o dwch komr-
kach. KaŇdej komrce nadaj odmienny kolor tþa.
Rys. 7.
Komrki o rŇnych
formatach
}
TD {
border: solid 1px black;
padding: 5px;
Tabela z rys. 7 posiada
dwa wiersze i jednĢ kolumnħ.
Ustalamy nazwħ klasy grnej
komrki 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 stylw. Zmieniamy kolor tþa
kaŇdej komrki z osobna:
TD.kot {
background: lightgreen;
}
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 komrek na-
gþwkowych zmienia wpis background: black;, zaĻ atrybut padding
zwiħksza iloĻę miejsca otaczajĢcego zawartoĻę komrki.
}
Klasy znaczników
W ęwiczeniu 6 spotkaliĻmy siħ po raz pierwszy z sytuacjĢ, w ktrej
pewne komrki (tj. komrki nagþwka) majĢ mieę inny format od
pozostaþych. Co zrobię, gdy w tabeli pojawia siħ wiħksza liczba te-
TD.pies {
background: yellow;
}
110
INTERNET.grudzieı.2004
C
M
Y
K
7
WARSZTAT
PROGRAMY
MAGAZYN
FIRMA
Z OKýADKI
NEWSY
NA CD
HTML
Ę
WICZENIE
8
StosujĢc klasy znacznikw przygotuj tabele o kolorystyce odpowiada-
jĢcej flagom Francji, Niemiec i Wþoch.
Rys. 8.
Flagi Î modyfikacja tþa i szerokoĻci
komrek
Ę
WICZENIE
10
Przygotuj witrynħ prezentujĢcĢ wyniki spotkaı eliminacyjnych grupy 5.
eliminacji mistrzostw Ļwiata, przedstawionĢ na rysunku 10 (patrz CD).
Flagi sĢ w istocie tabelami, ktre przed-
stawiajĢ jedynie kolor tþa. Komrki nie za-
wierajĢ Ňadnych danych. W takim przypad-
ku, wewnĢtrz komrek, naleŇy umieĻcię
spacjħ . W przeciwnym bowiem ra-
zie tþo komrki nie zostanie wyĻwietlone.
Ponadto naleŇy zmodyfikowaę szerokoĻę
komrki, 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:
Rys. 10.
Eliminacje piþkarskich mistrzostw Ļwiata Korea
i Japonia 2002
<TABLE>
<TR><TD class=ÑniebieskiÑ> </TD></TR>
<TR><TD class=ÑbialyÑ> </TD></TR>
<TR><TD class=ÑczerwonyÑ> </TD></TR>
</TABLE>
Atrybuty colspan oraz rowspan
Tabele omwione w ęwiczeniach 1-10 charakteryzuje bardzo prosta struk-
tura. KaŇdy wiersz zawiera identycznĢ liczbħ komrek. RwnieŇ kaŇda
z kolumn ma identycznĢ liczbħ komrek. Gdy tabela zawiera komrki roz-
ciĢgajĢce siħ na kilka wierszy lub kolumn, naleŇy uŇyę atrybutw colspan
oraz rowspan. Atrybuty te nadajemy komrkom TD lub TH. WartoĻciami
atrybutw sĢ liczby caþkowite, ktre okreĻlajĢ liczbħ wierszy lub kolumn
na jakie rozciĢga siħ dana komrka. JeĻli utworzymy komrkħ:
<TD colspan=Ñ3Ñ>
...
</TD>
to komrka ta bħdzie siħ rozciĢgaþa na trzy kolejne kolumny.
Podobnie, komrka:
<TD rowspan=Ñ5Ñ>
...
</TD>
rozciĢga siħ na piħę wierszy.
W stylach modyfikujemy szerokoĻę wszystkich komrek 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 dwch, nieco bardziej rozbudowanych ęwiczeı.
Ę
WICZENIE
9
Przygotuj witrynħ prezentujĢcĢ dane na temat kodu paskowego rezy-
storw, widocznĢ na rysunku 9 (patrz CD).
Ę
WICZENIE
11
Wykonaj tabelħ przedstawionĢ na rysunku 11. W tabeli tej komrka
o etykiecie A rozciĢga siħ na dwie kolumny.
Rys. 11.
Komrka A rozciĢga siħ na dwie
kolumny
Przygotowujemy tabelħ o dwch wierszach
i dwch kolumnach. Tabela taka byþa om-
wiona w ęwiczeniu 1. Nastħpnie pierwszej komrce w pierwszym
wierszu dodajemy atrybut colspan, zaĻ drugĢ komrkħ 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 komrek. Pierwsza komrka rozciĢga siħ na dwie kolumny.
StĢd w kodzie pierwszego wiersza wystħpuje o jednĢ komrkħ mniej
niŇ w kodzie wiersza drugiego.
n
Rys. 9.
Kod paskowy rezystorw
Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem
INTERNET.grudzieı.2004
111
[ Pobierz całość w formacie PDF ]