HTML - Tabele HTML 12-2004.pdf - html - Krzysiek5133

C M Y K

NA CD

NEWSY

Z OKýADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT 8

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ę:

<TR>

</TR>

<TR>

</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>

Ę 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

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:

<TR>

</TR>

<TR>

</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

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>wielkoĻę danej czcionki</TD>

</TR>

<TR>

<TD>(x-height) wysokoĻę danej czcionki</TD>

</TR>

<TR>

<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:

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>

</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ħ:

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:

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>

</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

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>

</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>

to komrka ta bħdzie siħ rozciĢgaþa na trzy kolejne kolumny.

Podobnie, komrka:

...

</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>

</TR>

<TR>

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

Rys. 9. Kod paskowy rezystorw

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

autora pod adresem http://www.gajdaw.pl.

INTERNET.grudzieı.2004

111

HTML - Tabele HTML 12-2004.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: