kurs tworzenia stron internetowych w języku HTML







BODY {
BACKGROUND-COLOR: #ffffff
}











 




























































Tabele



Tabele
Tabele mogą się wydawać trudne szczególnie, jeśli
chcemy ich używać do określenia układu stron. Jednak starannie
zaplanowany układ strony ułatwi nam ten element. Określenie
szerokości tabeli spowoduje, że będzie ona stała, a przeglądarka nie
będzie jej określać na swój sposób, umożliwi to wyświetlenie
elementów tak jak zostały zaplanowane.
Tworzenie prostej tabeli
Tabela składa się z wierszy i komórek. Ilość
komórek w każdym z wierszy określa kształt tabeli. Tabelę tworzymy
za pomocą znaczników <TABLE></TABLE>. Bez nich
tabela nie zostanie wyświetlona. W ramach tego znacznika są
umieszczane wszystkie elementy. Nie deklaruje on ilości wierszy i
komórek w wierszu.
Wiersz w tabeli
Wiersz tabeli określany jest przez znacznik:
<TR></TR>. Wiersz tabeli tworzy ramy dla komórek
z danymi. W ramach <TABLE></TABLE> można umieścić wiele
kolejnych definicji wierszy <TR></TR>.
Przykład:<TABLE><TR>wiersz
pierwszy</TR><TR>wiersz
drugi</TR><TR>wiersz
trzeci</TR></TABLE>
czyli:


wiersz pierwszy
wiersz drugi
wiersz trzeci

Komórka w wierszu
Za definiowanie komórek w tabeli odpowiada
znacznik: <TD></TD>. Komórka zawiera konkretne
dane, jak tekst i grafika. Konkretne komórki są umieszczane między
znacznikami wybranego rzędu.
Przykład:<TABLE> <TR>
<TD>1</TD><TD>1</TD><TD>1</TD></TR><TR>
<TD>2</TD><TD>2</TD><TD>2</TD></TR><TR>
<TD>3</TD><TD>3</TD><TD>3</TD></TR><TR>
<TD>4</TD><TD>4</TD><TD>4</TD></TR></TABLE>
czyli:



1
1
1

2
2
2

3
3
3

4
4
4
Jak widać, tabela zawiera 4 rzędy, w każdym po 3
komórek, zaś w konkretnych komórkach zostały umieszczone cyfry: od 1
do 4. Jest to najprostszy przykład tabeli.
UWAGI:
Istnieje znacznik <TH> służący do definiowania komórek
nagłówkowych. Powoduje on wyśrodkowanie zawartości komórki i
wyświetlenie jej pogrubioną czcionką.
Tytuł tabeli można umieścić pomiędzy otwierającym i
zamykającym znacznikiem <CAPTION>.

Dodawanie krawędzi tabeli
Krawędzie pomagają odróżnić tabele od reszty
strony. Aby tabela zawierała obramowanie, wystarczy rozszerzyć
definicję o atrybut BORDER. Jeśli nie podamy szerokości
krawędzi, przyjmowana jest jej domyślna wartość równa 2 piksele.
<TABLE BORDER=n>, gdzie n jest
szerokością ramki tabeli wyrażoną w pikselach.
Przykład:
<TABLE Border=3>



1
1
1

2
2
2

3
3
3

4
4
4
krawędź równa 3 piksele
<TABLE Border=10>



1
1
1

2
2
2

3
3
3

4
4
4
krawędź równa 10 pikseli

Zmiana koloru krawędzi  
Zazwyczaj kolor krawędzi tabeli zależny jest od
koloru tła,  jednak przeglądarka firmy Microsoft ma kilka
rozszerzeń pozwalających na określenie koloru krawędzi (włącznie z
cieniowaniem). Aby krawędzie miały jeden kolor należy wpisać:
<TABLE BORDER=n BORDERCOLOR="kolor">,
gdzie kolor określa kolor krawędzi; można wpisać nazwę koloru
np. blue (niebieski), red (czerwony) czy green (zielony) lub jej
szesnastkową wartość w postaci #rrggbb np. #0000CC jako
niebieski.
Przykład:<TABLE Border=10
BORDERCOLOR="red"><TR><TD>1</TD><TD>1</TD><TR><TD>2</TD><TD>2</TD><TR><TD>3</TD><TD>3</TD></TABLE>



1
1

2
2

3
3

Cieniowane krawędzie
<TABLE BORDERCOLORDARK="kolor"> -
pozwala zacieniować fragmenty krawędzi (górnych i lewych krawędzi
komórek oraz dolnych prawych krawędzi samej tabeli).
Przykład:
<TABLE Border=10 BORDERCOLORDARK="green">



1
1

2
2

3
3
<TABLE BORDERCOLORLIGHT="kolor"> - pozwala
wyświetlić oświetlone fragmenty krawędzi (dolnych i prawych krawędzi
komórek oraz górnej i lewej krawędzi).
Przykład:
<TABLE Border=10 BORDERCOLORLIGHT="yellow">



1
1

2
2

3
3

Określanie szerokości tabel
Przeglądarka automatycznie określi szerokość tabeli
poprzez obliczenia szerokości jej zawartości. Mimo to, doda ona do
obliczonej wartości kilka pikseli. Aby wykluczyć taką ewentualność
należy dokładnie określić szerokość poszczególnych komórek oraz
całej tabeli. Atrybut WIDTH daje nam możliwość samodzielnego
zdefiniowania szerokości tabeli.
WIDTH=n, gdzie n jest szerokością
komórki lub tabeli wyrażoną w pikselach( można stosować w
znacznikach TABLE lub TD)
Przykład:
<TABLE BORDER WIDTH=120>



1
1
1

2
2
2

3
3
3

4
4
4
<TABLE BORDER WIDTH=400>



1
1
1

2
2
2

3
3
3

4
4
4
UWAGI:

Szerokość komórki lub tabeli można także określić
jako wartość procentową: odpowiednio szerokość całej tabeli lub
szerokość okna przeglądarki. W takim przypadku zmiana szerokości
okna przeglądarki spowoduje zmianę szerokości
tabeli.

Otaczanie tabeli tekstem
Tabelę można otoczyć tekstem w podobnie jak w
przypadku ilustracji. Tekst napisany pod tabelą, a przed znacznikiem
zamykającym, otoczy tabelę.
<TABLE ALIGN=left> - tabela zostanie
wyrównana do lewej krawędzi okna przeglądarki, a tekst otoczy ją z
prawej



1
1
1

2
2
2

3
3
3

4
4
4to jest jakiś tekst to jest jakiś
tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to
jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest
jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś
tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to
jest jakiś tekst to jest jakiś tekst to jest jakiś tekst
<BR CLEAR=left> - aby przerwać
wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel
wyrównanych do lewego marginesu
<TABLE ALIGN=right> - tabela zostanie
wyrównana do prawej krawędzi okna przeglądarki, a tekst otoczy ją z
lewej



1
1
1

2
2
2

3
3
3

4
4
4to jest jakiś tekst to jest jakiś
tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to
jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest
jakiś tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś
tekst to jest jakiś tekst to jest jakiś tekst to jest jakiś tekst to
jest jakiś tekst to jest jakiś tekst to jest jakiś tekst
<BR CLEAR=right> - aby przerwać
wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel
wyrównanych do prawego marginesu
<BR CLEAR=all> - aby przerwać
wyświetlanie tekstu wokół tabeli i wznowić, gdy nie będzie już tabel
wyrównanych do obu marginesów

Dodawanie wolnych przestrzeni wokół
tabeli   

Jeśli tabela otoczona jest przez inne elementy
strony, to można ją odseparować dodając wokół niej wolną
przestrzeń.
<TABLE HSPACE=x>, gdzie x to
szerokość wolnego obszaru wyrażona w pikselach; stosujemy, gdy
chcemy dodać wolną przestrzeń z prawej i lewej strony tabeli.
<TABLE VSPACE=y>, gdzie y to
wysokość wolnego miejsca wyrażona w pikselach; stosujemy, gdy chcemy
dodać wolną przestrzeń u góry i u dołu tabeli.



Łączenie komórek
Łączenie komórek leżących w sąsiednich
kolumnach
Można połączyć wszystkie komórki w jednym wierszu i
wyświetlić w nim nagłówek. Znacznik definiujący komórkę, która ma
mieć szerokość kilku kolumn musi zawierać:
<TD COLSPAN=n>, gdzie n określa
na ile komórka ma być szeroka.
Przykład:



jeden
1

2
2
2

3
3
3<TABLE WIDTH=200
BORDER=5><TR>  <TD
COLSPAN=2>jeden</TD>  <TD>1</TD><TR>  <TD>2</TD>  <TD>2</TD>  <TD>2</TD><TR>  <TD>3</TD>  <TD>3</TD>  <TD>3</TD></TABLE>
Jeśli zdefiniowano komórkę szeroką na 2 kolumny, to
w tym wierszu należy zdefiniować o jedną komórkę mniej niż w
pozostałych, jeśli komórka jest szeroka na 3 kolumny, to w wierszu
jest o dwie komórki mnie itd.

Łączenie komórek w sąsiednich
wierszach
Łączenie komórek zajmujących kilka sąsiadujących
wierszy odbywa się podobnie jak przy łączeniu komórek w
kolumnach:<TD ROWSPAN=n>, gdzie n określa
ile wierszy ma zajmować komórka.
Przykład:



Litera
Liczba

1
2
3<TABLE WIDTH=200
HEIGHT=200 BORDER=2><TR>   <TD
ROWSPAN=2>Litera</TD>   <TD
COLSPAN=4>Liczba</TD></TR><TR>  
<TH>1</TH>  
<TH>2</TH>  
<TH>3</TH></TR></TABLE>

Wyrównanie zawartości komórki
Domyślnie zawartość komórek jest wyrównywana na dwa
sposoby: w poziomie do lewej oraz w pionie do środka komórki. Aby
samemu wyrównać zawartość komórki należy posłużyć się atrybutami:
ALIGN oraz VALIGN
<TD ALIGN=kierunek>, gdzie
kierunek to left(do lewej), center(na środek),
right(do prawej)<TABLE BORDER=3
width=200><TR>  <TD
ALIGN="left">left</TD><TR>  <TD
ALIGN="center">center</TD><TR>  <TD
ALIGN="right">right</TD></TABLE>
czyli:



left

center

right
<TD VALIGN=kierunek>, gdzie
kierunek może przyjąć wartości: top(góra),
middle(środek), bottom(dół) lub baseline(linia
bazowa)



top

middle

bottom

baseline
UWAGI:

Wartość baseline wyrównuje zawartość komórki do
linii bazowej pierwszej linii tekstu tej komórki. Jedynie Netscape
umożliwia stosowanie tej wartości.

Kontrola odstępów pomiędzy i wewnątrz
komórek
Jest możliwe określania odstępów pomiędzy komórkami
(ang. cell spacing), co zwiększa tabelę przy jednoczesnym
zachowaniu wielkości jej komórek. Rozszerzenie komórek (ang. cell
padding) dodaje pusty obszar wokół zawartości komórki, odsuwając
jej krawędzie na zewnątrz.
Określanie wielkości odstępów pomiędzy komórkami
oraz przestrzeni wewnątrz nich:
<TABLE CELLSPACING=n>, gdzie n
jest szerokością pomiędzy komórkami tabeli, wyrażoną w pikselach
<TABLE CELLSPACING=10 BORDER>



jeden

dwa

trzy

cztery
<TABLE CELLPADDING=n>, gdzie n
jest szerokością obszaru pomiędzy zawartością komórki a jej
krawędziami, wyrażoną w pikselach.
<TABLE CELLPADDING=20 BORDER>



jeden

dwa

trzy

cztery
 
UWAGI:
By pozbyć się obszaru pomiędzy komórkami a tabelą należy
wpisać CELLSPACING=0 CELLPADDING=0.
Domyślna wartość odstępu pomiędzy komórkami to 2 piksele, a
pomiędzy zawartością i krawędziami - 1 piksel.
Przy wyrównaniu zawartości komórek, obszar wokół niej jest
traktowany jako krawędzie komórki.

Zmiana koloru komórki
Można dowolnie zmieniać kolor tła jednej lub kilku
komórek. Służy do tego atrybut BGCOLOR w znaczniku TH lub TD.

<TD BGCOLOR="kolor">, gdzie "kolor"
określa kolor komórki.
Przykład:<TD BGCOLOR=#FF6666>KOLOR
CZERWONY</TD>....



KOLOR CZERWONY
KOLOR ŻÓŁTY
KOLOR BIAŁY
KOLOR NIEBIESKI
KOLOR ZIELONY
UWAGI:
Atrybut BGCOLOR wpisany w komórce TD lub TH ma pierwszeństwo
przed kolorem wybranym dla całej tabeli.

Wykorzystywanie ilustracji jako
tła
Aby wykorzystać ilustrację jako tło tabeli w
znaczniku TD lub TH należy użyć atrybutu BACKGROUND.
<TD BACKGROUND="obrazek.gif">, gdzie
obrazek.gif to adres URL ilustracji, która ma być tłem
komórki.
Przykład:
....<TD
BACKGROUND="tlo.jpg">tło</TD>....



tło
bez tła

bez tła
tło

Aby wykorzystać ilustrację jako tło całej tabeli
należy dodać atrybut BACKGROUND  w znaczniku TABLE.
<TABLE BACKGROUND="obrazek.gif">,
gdzie obrazek.gif jest adresem URL ilustracji, która ma być
tłem tabeli.
Przykład:
<TABLE BACKGROUND="tlo.jpg" BORDER WIDTH=100
HEIGHT=100>....



jeden
dwa
trzy

jeden
dwa
trzy
UWAGI:
Jeśli określamy ilustrację tła dla całej tabeli, to IE użyje
jednej ilustracji jako tła całej tabeli, natomiast Netscape
wyświetli w każdej komórce osobną kopię obrazka.


Podział tabeli na poziome sekcje
Tabelę możemy podzielić na poziome sekcje, które
będą miały jeden lub kilka wierszy, a następnie formatować całe
sekcje za jednym razem i rysować linie podziału tylko między
sekcjami, a nie wszystkimi wierszami. Przed pierwszym znacznikiem
<TR> definiującym nagłówek, zasadniczą część tabeli lub stopkę
należy wpisać <THEAD>, <TBODY> lub
<TFOOT>.
Przykład:




b
c
d


1
2
3
4

1
2
3
4

1
2
3
4<TABLE ALIGN=right
WIDTH=150 HEIGHT=150
BORDER><THEAD><TR>  <TD><BR></TD>  <TH>b</TH>  <TH>c</TH>  <TH>d</TH></TR><TBODY><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR></TABLE>
UWAGI:
Netscape nie rozpoznaje znaczników poziomych sekcji

Można dowolnie formatować pojedyncze poziome
grupy komórek znacznikami odnoszącymi się do pojedynczych komórek.
IE nie rozpoznaje atrybutów HEIGHT i WEIGHT.
Teoretycznie każda tabela wymaga, co najmniej jednej sekcji
TBODY. Sekcji THEAD i TFOOT można stworzyć tylko po jednej.


Podział
tabeli na grupy kolumn
Tabele można także podzielić na grupy kolumn dwóch
rodzajów - strukturalne i niestrukturalne. Te pierwsze określają,
gdzie będą rysowane linie podziału. Niestrukturalne grupy kolumn nie
pozwalają na rysowanie linii podziału, lecz dają możliwości
określania sposobu formatowania całych kolumn.
Podział tabel na strukturalne grupy
kolumn
Jeśli grupa kolumn będzie liczyć więcej niż jedną
kolumnę w ramach znaczników <TABLE> </TABLE> należy
dodać następujący znacznik:
<COLGROUP SPAN=n>, gdzie n jest
liczbą kolumn w grupie.
Przykład:





a
b
c
d


1
2
3
4

1
2
3
4<TABLE ALIGN=right
WIDTH=200 HEIGHT=200 BORDER><COLGROUP
ALIGN=right><COLGROUP VALIGN=top SPAN=2
ALIGN=left><THEAD><TR>  <TD>a</TD>  <TH>b</TH>  <TH>c</TH>  <TH>d</TH></TR><TBODY><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR></TABLE>

Podział tabel na niestrukturalne grupy
kolumn
W ramach znaczników <TABLE></TABLE>
należy wpisać:
<COL SPAN=n>, gdzie n jest liczbą
kolumn w grupie.
Przykład:





a
b
c
d


1
2
3
4

1
2
3
4<TABLE ALIGN=right
WIDTH=200 HEIGHT=200 BORDER><COL SPAN=2 VALIGN=top
ALIGN=right><THEAD><TR>  <TD>a</TD>  <TH>b</TH>  <TH>c</TH>  <TH>d</TH></TR><TBODY><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR><TR>  <TH>1</TH>  <TD>2</TD>  <TD>3</TD>  <TD>4</TD></TR></TABLE>
UWAGI:
Oba rodzaje podziału na grupy kolumn są ignorowane przez
Netscape.

Grupę COLGROUP można podzielić na grupy COL, by
dołączyć niestandardowe informacje do dowolnej kolumny w
strukturalnej grupie kolumn. Znaczniki COL unieważniają atrybuty
znacznika COLGROUP.
Wyrównanie zdefiniowane dla grupy kolumn nie dotyczy komórek
nagłówkowych <TH>.


Wybór linii do
wyświetlania
Można określić, które zewnętrzne krawędzie tabeli
powinny posiadać ramkę, jak również które wewnętrzne ramki powinny
się pojawić. Aby określić, które zewnętrzne krawędzie powinny być
wyświetlone należy wewnątrz znacznika TABLE, po atrybucie BORDER,
użyć atrybutu FRAME.
<TABLE BORDER FRAME=lokalizacja>,
gdzie lokalizacja to jedna z podanych poniżej wartości:

void - bez zewnętrznej linii



przykład
przykład
above - linia tylko na górnej krawędzi



przykład
przykład
hsides - linia na górnej i na dolnej krawędzi



przykład
przykład
vsides - linia na lewej i na prawej krawędzi



przykład
przykład
rhs - linia tylko na prawej krawędzi



przykład
przykład
lhs - linia tylko na lewej krawędzi



przykład
przykład
box lub border - linia na wszystkich krawędziach (wartość
domyślna)



przykład
przykład

Wybranie, które linie tabeli będą
wyświetlane
<TABLE BORDER RULES=obszar>, gdzie
obszar to jedna z podanych poniżej wartości:

none - bez wewnętrznych ramek



przykład
przykład
rows - poziome ramki pomiędzy wszystkimi wierszami



przykład
przykład
cols - pionowe ramki pomiędzy wszystkimi kolumnami



przykład
przykład
groups - pionowe ramki pomiędzy grupami kolumn



przykład
przykład
all - wewnętrzne ramki pomiędzy wszystkimi wierszami i
kolumnami



przykład
przykład
UWAGI:
Atrybut BORDER musi zostać użyty, aby zadziałały atrybuty
FRAME oraz RULES.

Kontrola łamania linii w
komórce
Tekst w komórkach dzielony jest na podstawie
wysokości i szerokości kolumny. Do wypisania całej zawartości w
jednej linii należy użyć atrybutu NOWRAP w znaczniku TD lub
TH.
Przykład:....<TD>tekst
bez NOWRAP</TD><TD NOWRAP>tekst z
NOWRAP</TD>....



tekst bez NOWRAP
tekst z NOWRAP
UWAGI:
Przeglądarki wyświetlą komórkę (oraz tabelę, w której jest ona
umieszczona) o szerokości koniecznej do wyświetlania pojedynczej
linii tekstu.
Atrybut NOWRAP unieważnia atrybut WIDTH tabeli.