CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Struktura tabeli HTML
Tabela HTML składa się z wierszy podzielonych na komórki. Całą
tabelę otaczamy znacznikami oraz ,
wewnątrz umieszczając wiersze. Do definiowania wierszy stosuje-
my znaczniki i . Nazwa znacznika TR jest skrótem
Table Row  wiersz tabeli. Komórki umieszczamy pomiędzy
oraz (ang. Table Data  dane tabeli). Przystąpmy do wyko-
HTML
HTMLnania pierwszej tabeli.
HTML
ĆWICZENIE 1
Wykonaj tabelę widoczną na rysunku 1.
Rys. 1. Tabela 2x2
Jednym
Tabela ta składa się z dwóch
z najważniejszych
wierszy oraz dwóch kolumn. Po
umieszczeniu w treS
ci strony (tj.
kroków nauki
pomiędzy znacznikami BODY)
znaczników TABLE przechodzimy
języka HTML
do ustalenia zawartoS
ci tabeli.
Znacznikami TR definiujemy pierwszy wiersz, w którym umiesz-
jest opanowanie
czamy dwie komórki. Komórki otaczamy znacznikami oraz
. W treS
ci komórek wprowadzamy litery A oraz B. Poniżej
umiejętnoS
ci
pierwszego wiersza (tj. pod znacznikiem , ale przed znaczni-
kiem ) umieszczamy kod drugiego wiersza tabeli. Kod
tworzenia tabel.
drugiego wiersza różni się jedynie zawartoS
cią komórek TD. Oto
kod, jaki powinniS
my otrzymać:
Tabele


wprowadzone


do języka


w celu ułatwienia


prezentacji

A	B
C	D

danych obecnie
Zauważmy, że znacznik otwierający tabelę posiada atrybut bor-
der= 1 . Atrybut ten włącza widocznoS
ć krawędzi tabeli. Jest on wy-
stanowią główne
godny do sprawdzania poprawnoS
ci kodu HTML. Włączając widocz-
noS
ć wszystkich krawędzi tabeli widzimy czy komórki tworzą zapla-
narzędzie
nowany przez nas układ.
do projektowania
ĆWICZENIE 2
Wykonaj tabelę o trzech wierszach i jednej kolumnie (3x1). W komór-
układu
kach umieS
ć litery X, Y, Z.
graficznego.
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:
Włodzimierz Gajda

X

Y

Z

ĆWICZENIE 3
Wykonaj tabelę o dwóch wierszach i pięciu kolumnach (2x5).
W komórkach umieS
ć kolejne liczby naturalne.
Wszystkie przykłady opisane w artykule
znajdują się na dołączonej
108 INTERNET.grudzień.2004
płycie CD w katalogu Warsztat_HTML.
TABELE
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
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. OczywiS
cie defini-
cję taką możemy również napisać w nieco dłuższej postaci:
TABLE {
Rys. 3. Tabela 2x5
border: solid black 2px;
Wewnątrz elementu TABLE umieszczamy dwa elementy TR. Każ- }
dy z wierszy zawiera pięć elementów TD:
TD {
border: solid black 2px;
}
Jeszcze inny sposób zapisu podanych wartoS
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 oczywiS
cie gruboS
ć krawędzi, zaS
bor-
der-color  kolor. Natomiast atrybut border-style okreS
la rodzaj linii.
Dopuszczalnymi wartoS
ciami są: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset oraz outset.
Zwróćmy również uwagę na możliwoS
ć ustalania różnego formatu

1	2	3	4	5
6	7	8	9	10

krawędzi lewej, prawej, dolnej i górnej z osobna. Do tego celu może-
Wspomniany atrybut border uwidacznia krawędzie tabeli. Dzięki temu my użyć czterech atrybutów: border-left, border-right, border-top
możemy stwierdzić, czy tworzona tabela jest zgodna z oczekiwaniami. i border-bottom, lub dwunastu atrybutów postaci: border-right-style,
Jednak format krawędzi pozostawia wiele do życzenia. Przejdx
my zatem border-right-width, border-right-color (słowo right zastępujemy słowa-
do ustalenia stylów, nadających odpowiedni format krawędziom. mi left, top lub bottom).
Definiowanie stylu obramowania ĆWICZENIE 5
Obramowanie tabeli definiujemy ustalając odpowiednie style. Przygotuj dwie tabele przedstawiające zestawienie jednostek względ-
Rozpocznijmy od zbadania formatu tabeli pozbawionej atrybutu border. nych i bezwzględnych stosowanych w arkuszach stylów. Stronę wzbo-
gać o style uwidaczniające krawędzie tabeli, zaS
komórki nagłówkowe
ĆWICZENIE 4 napisz czcionką wytłuszczoną.
Wykonaj tabelę prezentującą najdłuższe rzeki S
wiata. W tabeli umieS
ć
Rys. 5. Krawędzie tabeli zmodyfikowane
oprócz nazwy rzeki także jej długoS
ć oraz powierzchnię dorzecza.
stylami
Rys. 4. Tabela z podpisem
Tabele, które mamy przygotować, są
CAPTION i bez atrybutu border
widoczne na rys. 5. Każda z nich zawiera
W pierwszym wierszu tabeli dwie kolumny. W pierwszej kolumnie
umieS
cimy nazwy kolumn, umieszczamy nazwę jednostki, a w dru-
a w pozostałych informacje o rze- giej jej opis. Nazwę jednostki wytłuS
cimy
kach. Dane każdej rzeki znajdą się stosując elementy STRONG. Pierwsza
w osobnym wierszu tabeli. z tabel będzie miała następujący kod:
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
bezpoS
rednio po znaczniku

oraz

em	wielkoS ć danej czcionki

otwierającym tabelę.
Wygląd tabeli został przed-
stawiony na rys. 4, zaS
listing 1
(na CD) prezentuje kilka pierwszych wierszy kodu HTML.
Zauważmy, że domyS
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ą wartoS
ć atrybutu border znaczni-
kom TABLE oraz TD:

ex	(x-height) wysokoS ć danej czcionki
px	piksel danego monitora

TABLE, TD { Druga tabela różni się jedynie liczbą wierszy oraz danymi zawarty-
border: solid black 2px; mi w tabeli. Dodając do dokumentu opisane wczeS
niej style otrzyma-
} my witrynę przedstawioną na rysunku 5.
INTERNET.grudzień.2004 109
CMYK
NA CD NEWSY Z OKŁADKI FIRMA MAGAZYN PROGRAMY WARSZTAT
HTML
Krawędzie widoczne na rysunku 5 są nieco dziwne. Otaczają całą go typu komórek? Problem ten rozwiążemy stosując klasy znaczni-
tabelę oraz każdą komórkę, przy czym krawędzie sąsiadujących komó- ków. Jest to metoda pozwalająca niejako na zdefiniowanie nowych
rek nie łączą się. W celu złączenia krawędzi tabeli należy użyć atrybu- znaczników. Wprowadzane znaczniki różnią się od istniejących
tu border-collapse. Nadając mu wartoS
ć collapse wymusimy łączenie formatem.
krawędzi sąsiadujących komórek. Dokonujemy tego korzystając z atrybutu class. Atrybut ten może-
my stosować w odniesieniu do każdego elementu języka HTML. JeS
li
ĆWICZENIE 6 chcemy wprowadzić nowy format dla pewnych elementów TD, należy
Przygotuj stronę z zestawieniem wielokrotnoS
ci jednostek. Tabelę nadać im klasę, np. tytul:
sformatuj tak, jak na rysunku 6.
zawartoS
ć
Rys. 6. Tabela o  złączonych

krawędziach
Format takiego elementu ustalamy stosując selektor TD.tytul:
Najpierw przygotowujemy TD.tytul {
kod tabeli. Tabela ta posiada trzy definicje stylów...
kolumny i szesnaS
cie wierszy. }
Pierwszy wiersz jest wierszem W podobny sposób możemy zdefiniować styl elementu STRONG,
nagłówkowym, a pozostałe za- umieszczając w kodzie HTML klasę:
wierają dane. Format wszystkich php.ini
wierszy z danymi jest identycz- zaS
w arkuszach stylów ustalając format:
ny, ale różni się od formatu wier- STRONG.plik {
sza nagłówkowego. W celu ...style...
wprowadzenia innego formatu }
w pierwszym wierszu wykorzy- W dokumencie może pojawić się dowolna liczba znaczników po-
stamy element TH (ang. Table Header  nagłówek tabeli). Kod dwóch siadających tę samą nazwę klasy, na przykład pięć znaczników
początkowych wierszy tabeli jest następujący: 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, moglibyS
my w dokumencie umie-
S
cić znaczniki:
ala

ma

Przedrostek	Oznaczenie	WielokrotnoS ć, podwielokrotnoS ć

kota
Definiując style powyższych znaczników zastosujemy selektory:
tera- EM.plik, P.plik oraz TABLE.plik. Możemy również użyć selektora .plik:
T .plik {
10¹² = 1 000 000 000 000 ...style...
}
... Selektor taki będzie modyfikował format wszystkich znaczników
klasy plik.
Dodając poniższe definicje stylów:
TABLE { ĆWICZENIE 7
border-collapse: collapse; Przygotuj stronę pt.  Pies-Kot zawierającą tabelę o dwóch komór-
border: solid 2px black; kach. Każdej komórce nadaj odmienny kolor tła.
}
Rys. 7. Komórki o różnych
TD {
formatach
border: solid 1px black;
padding: 5px; Tabela z rys. 7 posiada
} dwa wiersze i jedną kolumnę.
TH { Ustalamy nazwę klasy górnej
border: solid 1px black; komórki tabeli na kot, zaS
dolnej na pies. Kod HTML tabeli będzie na-
color: white; stępujący:
background: black;
font-weight: bolder;
font-size: 12pt;
padding: 15px;

KOT

PIES

} Teraz przechodzimy do definicji stylów. Zmieniamy kolor tła
otrzymamy witrynę przedstawioną na rysunku 6. Tło komórek na- każdej komórki z osobna:
główkowych zmienia wpis background: black;, zaS
atrybut padding TD.kot {
zwiększa iloS
ć miejsca otaczającego zawartoS
ć komórki. background: lightgreen;
}
Klasy znaczników
W ćwiczeniu 6 spotkaliS
my się po raz pierwszy z sytuacją, w której TD.pies {
pewne komórki (tj. komórki nagłówka) mają mieć inny format od background: yellow;
pozostałych. Co zrobić, gdy w tabeli pojawia się większa liczba te- }
110 INTERNET.grudzień.2004
CMYK
WARSZTAT PROGRAMY MAGAZYN FIRMA Z OKŁADKI NEWSY NA CD
HTML
ĆWICZENIE 8 ĆWICZENIE 10
Stosując klasy znaczników przygotuj tabele o kolorystyce odpowiada- Przygotuj witrynę prezentującą wyniki spotkań eliminacyjnych grupy 5.
jącej flagom Francji, Niemiec i Włoch. eliminacji mistrzostw S
wiata, przedstawioną na rysunku 10 (patrz CD).
Rys. 8. Flagi  modyfikacja tła i szerokoS
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 umieS
cić
spację  . W przeciwnym bowiem ra-
zie tło komórki nie zostanie wyS
wietlone.
Ponadto należy zmodyfikować szerokoS
ć
komórki, stosując atrybut width.
Każda z flag przedstawionych na rysunku
Rys. 10. Eliminacje piłkarskich mistrzostw S
wiata Korea
jest w istocie tabelą o trzech wierszach i jed-
i Japonia 2002
nej kolumnie. Oto kod flagi francuskiej:
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. WartoS
ciami
W stylach modyfikujemy szerokoS
ć wszystkich komórek tabeli atrybutów są liczby całkowite, które okreS
lają liczbę wierszy lub kolumn
(bez względu na klasę; także tych bez przypisanej nazwy klasy): na jakie rozciąga się dana komórka. JeS
li utworzymy komórkę:
TD {
width: 150px; ...
}
a także dodajemy klasy mające na celu pokolorowanie flagi: to komórka ta będzie się rozciągała na trzy kolejne kolumny.
TD.niebieski { Podobnie, komórka:
color: rgb(0,0,0);
background: rgb(59,66,215); ...
}
Stosując przedstawione informacje możemy przystąpić do wykona- rozciąga się na pięć wierszy.
nia dwóch, nieco bardziej rozbudowanych ćwiczeń.
ĆWICZENIE 11
ĆWICZENIE 9 Wykonaj tabelę przedstawioną na rysunku 11. W tabeli tej komórka
Przygotuj witrynę prezentującą dane na temat kodu paskowego rezy- o etykiecie A rozciąga się na dwie kolumny.
storów, widoczną na rysunku 9 (patrz CD).
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, zaS
drugą komórkę z pierwszego
wiersza usuwamy. Otrzymamy kod:

A
B	C

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.
Rys. 9. Kod paskowy rezystorów
INTERNET.grudzień.2004 111