Kurs HTML HTML Tabele id 254777

Strona 1

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Tabele

W tym rozdziale dowiesz się...

Jak wstawić tabelkę na stronę WWW? Jakie są dodatkowe zastosowania tabel?
W jaki sposób dodać lub zmienić obramowanie tabeli?
W jaki sposób kontrolować marginesy wewnątrz tabeli?
Jak zmienić lub usunąć odstępy pomiędzy komórkami w tabeli?
Jak powinno się tworzyć nagłówek tabeli?
Jak wstawić tytuł (podpis) tabeli?
W jaki sposób zmienić rozmiary komórek oraz całych tabeli?
Jak zmienić sposób ustawienia tabeli na ekranie - np. ustawić na środku (wyśrodkować)?
Jak zmienić sposób ustawienia tekstu w tabeli?
Jak zmienić kolor tła tabeli?
W jaki sposób wstawić obrazek (grafikę, zdjęcie) w tle tabeli?
Jak zmienić kolor obramowania tabeli?
Jak zablokować zawijanie tekstu w tabeli, czyli sprawić, aby cały tekst znajdował się w jednej linijce?
W jaki sposób połączyć kilka komórek tabeli w jedną dużą?
W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?
W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?
Jak ukryć lub pokazać tylko niektóre zewnętrzne krawędzie tabeli?
Jak ukryć lub pokazać tylko niektóre wewnętrzne krawędzie tabeli?
Jak stworzyć tabelę podrzędną?

Struktura tabeli

</tr>
<tr>

</tr>
</table>

Jest to najprostsza tabela, gdzie:

<table>...</table>

jest znacznikiem tabeli

<tr>...</tr>

jest znacznikiem wiersza

<td>...</td>

jest znacznikiem pojedynczej komórki

Strona 2

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to
konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników

)

lub wierszy (znaczniki

). Należy przy tym zauważyć, że komórki tabeli (

)

znajdują się wewnątrz znacznków wierszy (

)! Liczba komórek w każdym wierszu powinna być

taka sama.

Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i
ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone
elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:

<table>

Tabela...

<tr>

</tr>

<br />

<tr>

</tr>

<br />

</table>

Edytory (X)HTML posiadają często specjalny generator tabel, który może ułatwić i znacznie przyspieszyć pracę.
Niestety edytory tekstowe zwykle nie pozwalają na powtórną edycję kodu, tzn. raz wstawioną tabelę, można
modyfikować już tylko ręcznie. Wady tej nie posiadają edytory graficzne (np.: FrontPage).

Przykład:

Po wpisaniu:

<table>

<tr>

<td>komórka1</td>

<td>komórka2</td>

</tr>

<tr>

<td>komórka3</td>

<td>komórka4</td>

</tr>

</table>

Otrzymamy:

komórka1 komórka2

komórka3 komórka4

Jak widać, taka tabela nie ma obramowania, dlatego jest mało czytelna. O tym, jak dodać obramowanie do tabeli,
przeczytasz w następnym rozdziale.

Dla większej czytelności kodu można umieścić każdy znacznik

<td>

w nowej linii. Jest to przydatne zwłaszcza w

przypadku dość obszernej treści w komórkach. Powyższa tabela jest równoznacza z:

Strona 3

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

<table>

<tr>

<td>komórka1</td>

<td>komórka2</td>

</tr>

<tr>

<td>komórka3</td>

<td>komórka4</td>

</tr>

</table>

Oczywiście wcięcia w tekście nie są obowiązkowe, ale zwiększają przejrzystość kodu. Dzięki takiemu sposobowi
zapisu, tworzenie i modyfikacja tabeli może przebiegać dużo sprawniej. Na tej stronie w większości została użyta
pierwsza metoda wpisywania znaczników, w Internecie najczęściej spotyka się drugą z ewentualnymi dodatkowymi
wcięciami przez znacznikami

<tr>

</tr>

. Możesz oczywiście opracować również własną metodę. Wybierz tą,

która najbardziej Ci odpowiada i stosuj ją konsekwentnie.

Odcięcia

Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki (spacje, tabulatory, znaki nowej linii) w
komórkach tabeli w przypadku tworzenia tzw. odcięć, czyli wstawiania do komórek tabeli poszczególnych
kawałków pociętego, zwykle większego obrazka. Odcięcia obsługuje wiele programów graficznych, a są one
przydatne np. w celu ustalenia różnego stopnia kompresji graficznej poszczególnych kawałków, co zmniejsza
rozmiar wynikowy pliku. W takim przypadku wewnątrz komórek tabeli nie powinniśmy umieszczać białych
znaków wraz ze znacznikiem <img />! Jeśli nie dotrzymamy tego warunku, w MSIE pojawią się przerwy poniżej
każdego kawałka.

Poprawnie:

Niepoprawnie:

<td>

</td>

<td>

</td>

Rozmiar i wielkość czcionki (oraz jej rodzaj w Netscape 6) zdefiniowane poza tabelą mogą nie mieć wpływu na
tekst wewnątrz niej!

Aby to zmienić, należy zdefiniować w każdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest
wstawienie w nagłówku dokumentu:

/* <![CDATA[ */

td { font-size: wielko

ść

px; color: kolor; font-family: rodzaj }

/* ]]> */

</style>

Strona 4

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

wielkość

Rozmiar tekstu w tabeli podany w pikselach

kolor

Barwa czcionki

rodzaj

Wybrany krój czcionki (potrzebne w Netscape 6)

Inne zastosowania tabel

Tabele na stronach WWW są używane nie tylko do prezentacji zbioru uporządkowanych danych, lecz również do
określonego ustawienia elementów strony. Na przykład za pomocą tabeli bez obramowania możemy ustawić w
jednej linii dwa elementy w ten sposób, że pierwszy znajdzie się przy lewej krawędzi strony, a drugi przy prawej:

<tr>

<td align="right">PRAWA</td>

</tr>

</table>

LEWA

PRAWA

Struktura strony

Innym częstym zastosowaniem tabel jest tworzenie struktury strony. Można np. w lewej kolumnie umieścić spis
treści serwisu, a w prawej - zawartość tekstową strony. Na górze można przeznaczyć miejsce na animowany banner
lub/i logo serwisu:

<tr>

<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj mo

na umie

logo serwisu</

td>

</tr>

<tr>

<td bgcolor="kolor menu" width="Tutaj wpisz szeroko

ść

menu (np.: 150)" valign="top">

Tu umieszcza si

odsyłacze spisu tre

</td>

Tu wpisuje si

tre

ść

strony

</td>

</tr>

</table>

Tutaj można umieścić logo serwisu

Tu umieszcza się
odsyłacze spisu treści

Tu wpisuje się treść strony

Tworzenie struktury strony opartej o tabele nie jest zalecane. Pierwotnym przeznaczeniem tabel była i jest
prezentacja serii danych o różnych powtarzających się typach. Do układania zwykłych elementów na stronie

Strona 5

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

lepiej nadaje się CSS i takie własności jak: pozycjonowanie, ustawienie, przyleganie, rozmiary, marginesy i inne.
Zobacz: Szablon strony na DIV-ach.

Wadą powyższego rozwiązania jest to, że taką samą strukturę musimy umieścić na każdej pojedynczej podstronie
naszego serwisu, co znacznie utrudnia późniejszą modyfikację szaty graficznej. Na szczęście wiele edytorów
HTML obsługuje tzw. szablony. Jest to mechanizm, pozwalający modyfikować jednocześnie wiele stron, na
których umieszczono taki sam fragment kodu (chodzi tutaj o spis treści, banner itp.). Zwykle szablony pracują
poprzez wklejenie na każdej ze stron takiego samego nagłówka (na początku) oraz stopki (na końcu). W kodzie
powyżej nagłówek został napisany kolorem niebieskim, natomiast stopka - zielonym. Kolor czarny oznacza
tekstową zawartość konkretnej strony, którą wpisujemy bez użycia szablonu.

Strona niezależna od rozdzielczości ekranu

W powyższym kodzie ustalono szerokość tabeli równą

100%

, czyli będzie ona zajmowała zawsze całą szerokość

okna przeglądarki (minus marginesy) bez względu na rozdzielczość, w jakiej pracuje użytkownik. Takie podejście
powoduje jednak, że tekst i inne elementy strony są inaczej ustawione w różnych rozdzielczościach ekranu. W
niektórych przypadkach może to zupełnie popsuć całą estetykę serwisu. Dlatego bardzo często szerokość głównej
tabeli strony ustala się nie w procentach ale w pikselach, przy czym dopasowuje się ją tak, aby w najniższej z
popularnych rozdzielczości (800x600) nie pojawiał się poziomy suwak do przewijania strony. Należy przy tym
zauważyć, że wartość

800

jest zbyt duża, ponieważ w oknie przeglądarki musi się jeszcze zmieścić pionowy

suwak oraz miejsce na marginesy strony, które można z resztą ustalić "na zero", jednak i tak zaleca się pewien
niewielki zapas bezpieczeństwa. Zwykle największą możliwą szerokością przy zerowych marginesach jest

770

pikseli. Tabelkę taką można wyśrodkować i wtedy w wyższych rozdzielczościach (np. 1024x768) pojawią się puste
przestrzenie po bokach strony, jednak wszystkie elementy treści będą poukładane dokładnie tak samo, a więc
otrzymamy stronę "niezależną" od rozdzielczości ekranu. To dużo efektywniejsze rozwiązanie niż budowa
osobnych wersji serwisu dla każdej rozdzielczości.

Do uzyskania takiego efektu, lepszym rozwiązaniem od tabel jest użycie bloków, np.:

Tu wpisuje si

tre

ść

strony

</div>

</body>

Stosowanie tabel ma jedną zasadniczą wadę: Microsoft Internet Explorer 7.0 wyświetla zawartość tabeli dopiero
kiedy zostanie ona całkowicie wczytana. Oznacza to, że zanim nie załaduje się cała treść strony, w oknie
przeglądarki nic nie zobaczymy. Wczytywanie może trwać długo i użytkownicy mogą się zniechęcić. Problem ten
nie występuje na zwykłych stronach, gdzie najpierw wyświetlany jest początek strony, a dalsza część jest
doczytywana w czasie, kiedy użytkownik czyta wstęp. Identyczny efekt uzyskamy w każdej przeglądarce, jeżeli
zbudujemy stronę opierając się na możliwościach CSS, a nie na tabelach. Zarówno Netscape/Mozilla/Firefox jak i
Opera potrafią ładować treść tabeli stopniowo, ale Microsoft Internet Explorer 7.0 niestety nie.

Niedogodności tej są pozbawione ramki (i to niezależnie od przeglądarki). Pozwalają one uzyskać podobną
strukturę strony, ale nie posiadają szeregu wad związanych z tabelami, takich jak: zwiększenie objętości stron
(wydłużenie wczytywania), problemy z treścią która nie mieści się w szerokości ekranu (psuje to całą estetykę
strony), zależność przewijania treści menu oraz zawartości strony, kłopoty z szablonami (nie potrafią modyfikować

Strona 6

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

różniącej się treści), zawiła struktura strony. Jednak niektóre osoby uważają ramki za "niemodne". W takim
przypadku rozwiązaniem może okazać się kompromis - połączenie tabelek i ramek w jednym szablonie (ostatnio
bardzo popularne rozwiązanie, stosowane na wielu stronach):

<tr>

<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj mo

na umie

logo serwisu</

td>

</tr>

<tr>

<a target="strona" href="home.html">Strona główna</a><br />

<a target="strona" href="strona1.html">Rozdział 1</a><br />

<a target="strona" href="strona2.html">Rozdział 2</a><br />

<a target="strona" href="linki.html">Linki</a><br />

<a href="mailto:jan_kowalski@example.com">Kontakt</a><br>

</td>

<td bgcolor="kolor strony" valign="top"><iframe name="strona" src="home.html" width="560" height="440"

frameborder="0"></iframe></td>

</tr>

</table>

Taki sposób budowania struktury strony jednak też nie jest pozbawiony wad. Na ekranie mogą pojawić się dwa
pionowe suwaki do przewijania strony, co sprawia kłopoty w mniejszych rozdzielczościach, a w większych
okienko do wczytywania treści kolejnych stron może mieć niewystarczającą wysokość. Problem można jednak w
całości rozwiązać za pomocą skryptu AutoIFRAME.

Ramki

Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądź ściętymi rogami.

Lepszym rozwiązaniem będzie użycie CSS, ponieważ tabele nie zostały zaprojektowane z myślą o tworzeniu
efektów graficznych na stronach.

Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie
cztery narożniki, np.:

Warto również wykonać przezroczysty obrazek GIF o rozmiarach 1x1 piksel, który posłuży nam do usunięcia
efektu nieestetycznie wyglądających pustych komórek tabeli. Brak zawartości komórki może spowodować jej
błędne wyświetlenie, a wstawienie tam tekstu - zbyt duże jej rozciągnięcie!

Tutaj jest obrazek:

(w celu ułatwienia skopiowania jest sztucznie powiększony oraz dodano obramowanie)

Następnie tworzymy tabelę z trzema kolumnami i trzema wierszami. W komórkach narożnych wstawiamy
narysowane wcześniej obrazki, natomiast w pozostałych komórkach ustalamy kolor tła, taki sam jak kolor
rysunków narożników i umieszczamy przezroczysty obrazek. W komórce centralnej wpisujemy właściwą treść
tabelki:

Strona 7

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

<tr><td style="line-height: 1px"><img src="lg.gif" alt="" /></td><td bgcolor="#426B9C" style="line-

height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pg.gif" alt="" /></

td></tr>

<font color="#C0FFFF"><b>Tabelka z zaokr

glonymi rogami</b></font>

</td><td bgcolor="#426B9C"><img src="0.gif" alt="" /></td></tr>

<tr><td style="line-height: 1px"><img src="ld.gif" alt="" /></td><td bgcolor="#426B9C" style="line-

height: 1px"><img src="0.gif" alt="" /></td><td style="line-height: 1px"><img src="pd.gif" alt="" /></

td></tr>

</table>

Efekt:

Tabelka z zaokrąglonymi rogami

To samo z obramowaniem - dla pokazania zasady:

Tabelka z zaokrąglonymi rogami

Zauważ, że aby otrzymać taki efekt wystarczy narysować cztery małe obrazki (w przykładzie o rozmiarach
10x10 pikseli), dzięki czemu nie spowalniają one zbytnio ładowania strony, a tabelka może mieć dowolne
wymiary, zależne od długości wpisanego w niej tekstu.

Ustalając różne kolory tła w odpowiednich komórkach tabeli, można również uzyskać np. taki efekt:

Dwukolorowa tabelka
z zaokrąglonymi rogami

Inne ciekawe przykłady:

Tylko dwa narożniki zaokrąglone

<table cellpadding="0" cellspacing="3">

Obramowanie

gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).

Strona 8

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze
oraz kolumny. Pozwala określić szerokość zewnętrznej części tego obramowania.

Przykład:

Po wpisaniu:

<tr>

<td>komórka1</td>

<td>komórka2</td>

</tr>

<tr>

<td>komórka3</td>

<td>komórka4</td>

</tr>

</table>

otrzymamy:

komórka1 komórka2

komórka3 komórka4

Marginesy w komórkach

gdzie "x" oznacza szerokość marginesu (w pikselach).

Komenda wprowadza dodatkowe marginesy (poziome i pionowe) we wszystkich komórkach tabeli, przez co
wygląda ona bardziej estetycznie.

Przykład:

komórka1

komórka2

komórka3

komórka4

Odstępy między komórkami

gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).

Strona 9

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Znacznik ten umożliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami
tabeli. Aby zobaczyć różnicę pomiędzy tego typu odstępami a marginesami wewnątrz komórek, trzeba nadać tabeli
obramowanie.

Przykład:

komórka1 komórka2

komórka3 komórka4

Komórki nagłówkowe

1. Nagłówek poziomy

<th>...</th>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>

2. Nagłówek pionowy

<th>...</th>

</tr>
<tr>

<th>...</th>

</tr>
</table>

3. Nagłówek mieszany

<th></th>

<th>...</th>

</tr>
<tr>

<th>...</th>

Strona 10

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

</tr>
<tr>

<th>...</th>

</tr>
</table>

Komórkę nagłówkową

wstawia się tak samo jak zwykłą komórka tabeli

Różni się jedynie tym, że tekst do niej wpisany, jest napisany zwykle czcionką pogrubioną oraz ustawiony na
ś

rodku (wyśrodkowany). Dlatego właśnie - jak sama nazwa wskazuje - komórka taka nadaje się do tworzenia

nagłówka tabeli. Może się ona znajdować w dowolnym wierszu - nie tylko w pierwszym. Dodatkowo w wierszu
takim mogą się znajdować również inne zwykłe komórki

. Dzięki temu możemy stworzyć

pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli.

Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (

<td

align="center"><b>...</b></td>

), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe

oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne.

Przykład:

komórka1 komórka2

komórka3 komórka4

1 komórka1 komórka2

2 komórka3 komórka4

1 komórka1 komórka2

2 komórka3 komórka4

Dla bardzo obszernych tabel, z dużą ilością komórek nagłówkowych, przydatne może się okazać, określenie
atrybutu

title="tekst"

dla każdej zwykłej komórki

<td>

. Jako wartość tego atrybutu podajemy tekst, który

powinien pojawić się na ekranie w dymku podpowiedzi, kiedy użytkownik wskaże myszką określoną komórkę
tabeli. Można wpisać tam treść nagłówka, do którego należy dana komórka. Ułatwi to czytanie, jeśli komórki
nagłówkowe znikną już z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja zwłaszcza, jeśli
tabela posiada dużo kolumn.

Przykład:

Wskaż myszką dowolną zwykłą komórkę poniższej tabeli:

Strona 11

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

1 komórka1 komórka2

2 komórka3 komórka4

Przy okazji: zwróć uwagę na komórkę powyższej tabeli, która znajduje się w jej lewym-górnym rogu (na samym
brzegu). Wygląda ona inaczej niż pozostałe, ponieważ nie posiada wewnętrznego obramowania. Dzieje się tak
dlatego, bo nie ma tam żadnej treści. Jeśli chcemy to zmienić, należy wpisać do niej:

. Jest to

znak specjalny, oznaczający niełamliwą spację. Nie pojawi się on na ekranie, ale za to wprowadzi obramowanie do
pustej komórki tabeli.

1 komórka1 komórka2

2 komórka3 komórka4

Tytuł tabeli

<table>
<caption align="ustawienie">Tu podaj tytuł</caption>
(...)
</table>

gdzie jako "ustawienie" należy podać:

top

" - tytuł górny (domyślnie)

bottom

" - tytuł dolny

left

" - ustawienie przy lewej krawędzi tabeli

right

" - przy prawej krawędzi

center

" - na środku

Polecenie to stwarza Ci możliwość nadania tytułu w formie nagłówka nad bądź podpisu pod tabelą. który może być
umiejscowiony na górze (domyślnie) lub na dole tabeli.

Element CAPTION musi się znajdować zaraz po znaczniku TABLE!

Niektóre przeglądarki mają problemy z interpretacją atrybutów align="left" i align="right". Dodatkowo
Netscape 6 wyświetla tytuły tabeli zawsze czcionką 'Times New Roman' koloru czarnego (w Netscape 7 wszystko
jest w porządku).

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

To jest tytuł tabeli

komórka1 komórka2

komórka3 komórka4

Strona 12

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Wymiary

1. Wymiary całej tabeli

lub

2. Wymiary pojedynczej komórki

</tr>
</table>

lub

</tr>
</table>

We wszystkich przypadkach "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu lub
względem wymiarów elementu nadrzędnego.
Analogicznie "y" oraz "y%" oznaczają wysokość.

Komenda pozwala narysować tabelę o dokładnie zamierzonych wymiarach (długości i wysokości). Jeśli zależy nam
na tym, aby nasza tabela wyglądała zawsze tak samo (niezależnie od rozdzielczości ekranu), powinniśmy podawać
wymiary w procentach powierzchni ekranu (

). Natomiast jeżeli tabela ma mieć stały rozmiar bezwzględny

(zawsze tyle samo pikseli), musimy podawać długość i wysokość w pikselach ekranowych (

). Oczywiście jeśli

określimy wysokość/szerokość pojedynczej komórki, spowoduje to ustalenie takiej samej wysokości/szerokości dla
całego wiersza/kolumny.

UWAGA! Podczas drukowania strony, tabela która nie mieści się w szerokości arkusza papieru,
najprawdopodobniej zostanie "ucięta"!

Atrybut HEIGHT dla znacznika TABLE nie wchodzi w skład specyfikacji HTML 4.01.

Atrybuty WIDTH oraz HEIGHT dla komórki tabeli (TD) są zdeprecjonowane przez specyfikację HTML 4.01 -
zaleca się stosowanie stylów.

Przykład:

Strona 13

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

komórka1 komórka2

komórka3 komórka4

komórka1 komórka2

komórka3 komórka4

komórka1

komórka2

komórka3

komórka4

komórka1 komórka2

komórka3

Wyrównanie tabeli

gdzie jako "rodzaj" należy wpisać:

left

" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu

right

" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu

center

" - wyśrodkowanie tabeli

Polecenie to pozwala umiejscowić tabelę w wybranym przez nas miejscu na ekranie.

Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów (dla
uzyskania efektu wyśrodkowania zobacz: Szerokość i marginesy automatyczne - "Elementy blokowe, nie-
zastępowane" - punkt 3).

Przykład:

align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left",

align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left",
align="left", align="left", align="left", align="left", align="left"...

align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right", align="right",
align="right", align="right", align="right", align="right", align="right", align="right", align="right",

Strona 14

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

align="center"

komórka1 komórka2

komórka3 komórka4

Wyrównanie zawartości tabeli

1. Wyrównanie zawartości całego wiersza

2. Wyrównanie zawartości pojedynczej komórki

</tr>
</table>

W obu przypadkach należy podać:

rodzaj

left

" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie)

right

" - wyrównanie zawartości do prawej

center

" - wyśrodkowanie zawartości

ustawienie

top

" - ustawienie zawartości (wiersza lub komórki) na górze

bottom

" - ustawienie zawartości na dole

middle

" - ustawienie zawartości po środku (domyślnie)

Dzięki tym poleceniom możliwe jest podanie umiejscowienia zawartości całego wiersza tabeli, jak również
pojedynczej komórki.

Przykład:

Dla pierwszego wiersza

Strona 15

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

komórka1

komórka2

komórka3

komórka4

komórka1 komórka2

komórka3

<td align="right"

valign="bottom">

Kolor tła

1. W całej tabeli

2. W jednym wierszu

3. W pojedynczej komórce

</tr>
</table>

We wszystkich przypadkach jako "kolor" należy podać definicję koloru [zobacz: Kolory].

Komenda umożliwia Ci podanie koloru tła: w całej tabeli, w jednym (lub kilku) wierszach bądź w pojedynczej
komórce. [zobacz: Kolory].

Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

komórka1 komórka2

komórka3 komórka4

Dla pierwszego wiersza

Strona 16

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

komórka1 komórka2

komórka3

Tło obrazkowe

1. W całej tabeli

<table background="

cie

ka dost

pu">...</table>

2. W pojedynczej komórce

<td background="

cie

ka dost

pu">...</td>

</tr>
</table>

We wszystkich przypadkach jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany
obrazek.

Polecenie pozwala na podanie obrazka, który zostanie umieszczony w tle całej tabeli bądź w pojedynczej komórce.

Określenie tła w całej tabeli w Netscape 6 skutkuje tym, że odstępy między komórkami nie zostaną wypełnione
(w Netscape 7 wszystko jest w porządku)!

Atrybut BACKGROUND nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

komórka1

komórka2

komórka3

komórka4

komórka1

komórka2

komórka3

komórka4

Strona 17

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Kolor obramowania

(tylko Internet Explorer!)

1. W całej tabeli

2. W jednym wierszu

3. W pojedynczej komórce

We wszystkich przypadkach jako "kolor, kolor1, kolor2" należy podać definicję koloru [zobacz: Kolory], przy
czym:

Strona 18

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

kolor

Oznacza kolor, jaki będzie miało całe obramowanie

kolor1

Oznacza kolor, jaki będzie miała "oświetlona" część tabeli (lewa oraz górna krawędź obramowania -

bordercolorlight="..."

)

kolor2

Oznacza kolor, jaki będzie miała "ocieniona" część tabeli (prawa oraz dolna krawędź obramowania -

bordercolordark="..."

)

Polecenie to umożliwia Ci podanie koloru obramowania tabeli (jako całości, a także w pojedynczych komórkach).
Możesz również zdefiniować kolor cieni w komórkach (standardowo są one kolorów odpowiednio szarego - cień,
białego - oświetlenie).

Atrybuty BORDERCOLOR, BORDERCOLORLIGHT oraz BORDERCOLORDARK nie wchodzą w
skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

Blokada zawijania tekstu

</tr>
</table>

Pozwala zablokować automatyczne zawijanie wierszy w wybranych komórkach tabeli, dzięki czemu mogą się w
nich znajdować dowolnie długie linijki. Przełamanie linii i przeniesienie tekstu do następnego wiersza, może
nastąpić tylko po wstawieniu znacznika <br />. Należy jednak uważnie stosować powyższe polecenie - przesadnie
długie komórki tabeli mogą utrudnić czytanie i nie wyglądają estetycznie.

Atrybut NOWRAP jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Łączenie komórek

1. Poziome łączenie komórek

</tr>
</table>

gdzie "x" oznacza liczbę komórek do połączenia w poziomie.

2. Pionowe łączenie komórek

Strona 19

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

</tr>
</table>

gdzie "y" oznacza liczbę komórek do połączenia w pionie.

Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona)
może się rozciągać na kilka komórek pojedynczych.

Tabela z połączonymi komórkami zawiera mniej znaczników

, ponieważ komórka połączona

rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. Każdy atrybut

colspan="x"

lub

rowspan="y"

eleminuje

n-1

komórek pojedynczych (w przyległych kolumnach lub wierszach).

Przykład:

Poziome łączenie komórek:
Dla pierwszej komórki

(druga komórka nie istnieje, ponieważ została połączona z pierwszą)

komórki1,2

komórka3 komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<tr>

<td colspan="2">komórki1,2</td>

</tr>

<tr>

<td>komórka3</td> <td>komórka4</td>

</tr>

</table>

Pionowe łączenie komórek:
Dla pierwszej komórki

(trzecia komórka nie istnieje, ponieważ została połączona z pierwszą)

komórki1,3

komórka2

komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<tr>

<td rowspan="2">komórki1,3</td> <td>komórka2</td>

</tr>

<tr>

<td>komórka4</td>

Strona 20

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

</tr>

</table>

Łączenie wierszy w grupy

<table>

<tbody>

</tbody>
</table>

Łączenie wierszy w grupy umożliwia później odnoszenie się do takiej grupy jako do całości.Dzięki temu możemy
nadać od razu całej grupie:

1. Określony rodzaj formatowania - ustawienie tekstu w komórkach

(zobacz: Wyrównanie zawartości tabeli)

2. Kolor tła (nie obsługuje Opera 8)

(zobacz: Kolor tła)

3. Usunąć część krawędzi wewnętrznych w tabeli

(zobacz: Wewnętrzne krawędzie)

W grupę można połączyć dowolną liczbę wierszy. W jednej tabeli może istnieć kilka grup.

Jeżeli umieścimy w tabeli przynajmniej jeden znacznik TBODY, wszystkie wiersze muszą być objęte tego typu
znacznikami! Dla pozostałych komórek należy utworzyć dodatkowy znacznik TBODY, który nie musi posiadać
ż

adnych atrybutów.

Atrybut BGCOLOR dla znacznika TBODY nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się
stosowanie stylów.

Przykład:

Po wpisaniu:

<tr>

<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>

</tr>

<tr>

<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>

</tr>

Strona 21

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

</tbody>

<tbody>

<tr>

<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>

</tr>

</tbody>

</table>

otrzymamy:

komórka1

komórka2

komórka3

komórka4

komórka5

komórka6

komórka7

komórka8

komórka9

Nagłówek i stopka

Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na
dole. Nagłówek tworzymy, przy użyciu:

, natomiast stopkę:

W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną
ilość znaczników

(pozwala to usnąć wewnętrzne krawędzie w grupach).

Znacznik TFOOT musi się znajdować w tabeli przed elementem TBODY, tzn. zaraz na początku - po THEAD.
Umieszczenie stopki na końcu tabeli jest błędem! Ma to na celu ułatwienie renderowania tabeli, zanim wczytają
się jej wszystkie wiersze.

Przykład:

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>

</tr>

<tr>

<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>

</tr>

</tbody>

<tbody>

<tr>

<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>

</tr>

<tr>

<td>komórka10</td> <td>komórka11</td> <td>komórka12</td>

</tr>

Strona 22

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

<tr>

<td>komórka13</td> <td>komórka14</td> <td>komórka15</td>

</tr>

</tbody>

</table>

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

komórka10 komórka11 komórka12

komórka13 komórka14 komórka15

Łączenie kolumn w grupy

<table>

<colgroup span="x"></colgroup>
<tr>...</tr>
</table>

gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut

span="..."

przyjmie on domyślną wartość "

Łączenie kolumn w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy
nadać od razu całej grupie:

1. Określony rodzaj formatowania - ustawienie tekstu w komórkach (nie obsługuje Netscape 7 i Opera 6)

(zobacz: Wyrównanie zawartości tabeli)

2. Kolor tła (nie obsługuje Netscape 7 i Opera 8)

(zobacz: Kolor tła)

3. Usunąć część krawędzi wewnętrznych w tabeli

(zobacz: Wewnętrzne krawędzie)

W grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup.

Strona 23

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Atrybut BGCOLOR dla znacznika COLGROUP nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się
stosowanie stylów.

Przykład:

Po wpisaniu:

<colgroup span="1" align="center" valign="bottom"></colgroup>

<tr>

<td height="50">komórka1</td> <td>komórka2</td> <td>komórka3</td>

</tr>

<tr>

<td height="50">komórka4</td> <td>komórka5</td> <td>komórka6</td>

</tr>

</table>

otrzymamy:

komórka1

komórka2

komórka3

komórka4

komórka5

komórka6

Zewnętrzne krawędzie

gdzie jako "typ" należy podać:

1. "

void

" - usuwa zewnętrzne obramowanie

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

2. "

above

" - tylko górna krawędź

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

3. "

below

" - tylko dolna krawędź

Strona 24

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

4. "

lhs

" - tylko lewa krawędź

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

5. "

rhs

" - tylko prawa krawędź

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

6. "

hsides

" - tylko poziome krawędzie

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

7. "

vsides

" - tylko pionowe krawędzie

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

8. "

box

" - wszystkie krawędzie zewnętrzne (domyślnie)

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

Strona 25

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Nie obsługuje Opera 6!

Wewnętrzne krawędzie

gdzie jako "typ" należy podać:

1. "

none

" - usuwa wszystkie wewnętrzne krawędzie

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

2. "

rows

" - tylko poziome krawędzie w środku tabeli

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

3. "

cols

" - tylko pionowe krawędzie w środku tabeli

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

4. "

all

" - wszystkie krawędzie wewnętrzne (domyślnie)

Przykład:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

5. "

groups

" - wybrane krawędzie wewnętrzne (grupy).

Aby skorzystać z tego polecenia, należy najpierw podzielić tabelę na grupy (zobacz:
Łączenie wierszy w grupy oraz Łączenie kolumn w grupy).

Nie obsługuje Netscape 6 i Opera 6, natomiast w Operze 7 wszystko jest w porządku, a Netscape 7 nie usuwa
obramowania pomiędzy kolumnami dla

rules="groups"

Strona 26

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Przykład:

Po wpisaniu:

<colgroup span="1"></colgroup>

<colgroup span="3"></colgroup>

<tbody>

<tr>

<td>komórka1</td> <td>komórka2</td> <td>komórka3</td>

</tr>

</tbody>

<tbody>

<tr>

<td>komórka4</td> <td>komórka5</td> <td>komórka6</td>

</tr>

<tr>

<td>komórka7</td> <td>komórka8</td> <td>komórka9</td>

</tr>

</tbody>

</table>

otrzymamy:

komórka1 komórka2 komórka3

komórka4 komórka5 komórka6

komórka7 komórka8 komórka9

Znacznik <colgroup>...</colgroup> łaczy kolumny tabeli strukturalnie. Jeśli chcemy nadać dodatkowe atrybuty dla
poszczególnych pojedynczych kolumn, zachowując jednocześnie wewnętrzne krawędzie tylko pomiędzy grupami,
należy użyć wewnątrz grupy znaczników

<col />

. Odpowiadają one za pojedynczą kolumnę, co pozwala nadać

jej określone atrybuty, bez dodatkowego łączenia kolumn w grupy:

<colgroup span="2">

<col span="2" valign="top" />

</colgroup>

<colgroup span="2">

<col valign="bottom" />

<col />

</colgroup>

<tr>

<td height="50">komórka1</td>

<td>komórka2</td>

<td>komórka3</td>

<td>komórka4</td>

</tr>

</table>

Zauważ, że wewnętrzne obramowanie dzieli tylko grupy kolumn (

), a nie

pojedyncze kolumny (

<col />

Strona 27

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

komórka1 komórka2

komórka3

komórka4

UWAGA! W każdej grupie kolumn (

) musi być tyle znaczników

<col />

ile wskazuje atrybut

span="..."

, nadany całej grupie, chyba że również dla znacznika

<col />

nadamy ten

atrybut. Nawet jeśli kolumna nie wprowadza żadnych atrybutów, musi się znaleźć na liście, w przeciwnym razie
tabela zostanie błędnie wyświetlona!

Jeśli nie podamy atrybutu

span="..."

(dla grupy lub kolumny), zostanie przyjęta jego domyślna wartość, równa

Zagnieżdżanie tabel

<td>

</tr>
</table>

</td>

</tr>
</table>

gdzie kolorem

czerwonym

zaznaczono tabelę główną (nadrzędną), a kolorem

zielonym

tabelę wewnętrzną

(podrzędną). Możliwe jest oczywiście dalsze zagnieżdżanie.

Dzięki konstrukcji zagnieżdżania tabel, możliwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewnętrzne
znajdują się w komórkach tabeli zewnętrznej.

Zauważ, że w składni polecenia powyżej, tabela podrzędna jest bardziej wcięta (przesunięta w prawo) niż
nadrzędna. Nie jest to konieczne, ale bardzo ułatwia tworzenie i czytanie kodu, dlatego polecam używanie takiego
sposobu wpisywania.

Przykład:

komórka1A komórka1B

komórka1C komórka1D

komórka2

komórka3

komórka4

Strona 28

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

Przedstawione poniżej przykłady nie są zalecane, ponieważ tabele nie zostały zaprojektowane do tworzenia
efektów wizualnych ani struktury strony. Zaleca się stosowanie CSS.

Jedno z przydatnych zastosowań zagnieżdżania tabel:

5 zagnieżdżonych tabelek...

A oto praktyczne wykorzystanie zagnieżdżania - budowa struktury strony (na biało zaznaczono tabele
zagnieżdżone):

LOGO

MENU
- Link 1
- Link 2
- Link 3

MENU 2
- Link

TREŚĆ STRONY

Jakis tekst...

STOPKA

Kod, który należy wpisać, aby otrzymać ostatnią tabelę, jest następujący:

<tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

</table>

<br />

<tr>

Strona 29

Kurs HTML - HTML - Tabele

2008-02-07 18:46:56

http://www.kurshtml.boo.pl/html/tabele.print.html

</tr>

</table>

</td>

<tr>

<td height="100%" valign="top" bgcolor="white"><b>TRE

ŚĆ

STRONY</b><br /><br /

>Jakis tekst...</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td align="center" valign="middle" bgcolor="white"><b>STOPKA</b></td>

</tr>

</table>

</td>

</tr>

</table>

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.

Wyszukiwarka

Podobne podstrony:

więcej podobnych podstron