Kurs HTML - HTML - Tabele Strona 1
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
Jest to najprostsza tabela, gdzie:
jest znacznikiem tabeli
jest znacznikiem wiersza
jest znacznikiem pojedynczej komórki
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 2
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:
| ... | ... |
| ... | ... |
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:
| komórka1 | komórka2 |
| komórka3 | komórka4 |
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 w nowej linii. Jest to przydatne zwłaszcza w
przypadku dość obszernej treści w komórkach. Powy\sza tabela jest równoznacza z:
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 3
| komórka1 | komórka2 |
| komórka3 | komórka4 |
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 i . 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
ka\dego kawałka.
Poprawnie:
Niepoprawnie:
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:
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 4
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:
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:
| Tutaj mo\na umieścić logo serwisu td> | |
Tutaj wpisz szerokość menu (np.: 150) Tu umieszcza się odsyłacze spisu treści | Tu wpisuje się treść strony |
Tutaj mo\na umieścić logo serwisu
Tu umieszcza się Tu wpisuje się treść strony
odsyłacze spisu treści
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
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 5
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ózniejszą 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
100%
W powy\szym kodzie ustalono szerokość tabeli równą , 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
800
zauwa\yć, \e wartość 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
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ć
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 6
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):
| Tutaj mo\na umieścić logo serwisu td> | |
Strona główna strona Rozdział 1 strona Rozdział 2 strona Linki strona Kontakt | |
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ądz ś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:
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 7
 |  |  td> |
| #426B9C #426B9C Tabelka z zaokrąglonymi rogami | |
 | |  td> |
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
x ...
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 8
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:
| komórka1 | komórka2 |
| komórka3 | komórka4 |
otrzymamy:
komórka1 komórka2
komórka3 komórka4
Marginesy w komórkach
x ...
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:
x ...
gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach).
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 9
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:
2. Nagłówek pionowy
3. Nagłówek mieszany
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.
align="center">...
), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe
oprócz efektu wizualnego niosą ze sobą wa\ne znaczenie semantyczne.
Przykład:
A B
komórka1 komórka2
komórka3 komórka4
1 komórka1 komórka2
2 komórka3 komórka4
A B
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 . 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:
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 11
A B
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.
A B
1 komórka1 komórka2
2 komórka3 komórka4
Tytuł tabeli
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ądz 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
http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56
Kurs HTML - HTML - Tabele Strona 12
Wymiary
1. Wymiary całej tabeli
x y ...
lub
x% y% ...
2. Wymiary pojedynczej komórki
lub
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ć
x% y%
wymiary w procentach powierzchni ekranu ( , ). Natomiast je\eli tabela ma mieć stały rozmiar bezwzględny
x y
(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:
400 100 Wyrównanie tabeli rodzaj ... 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", komórka1 komórka2 align="left", align="left", align="left", align="left", align="left", align="left", align="left", komórka3 komórka4 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", komórka1 komórka2 align="right", align="right", align="right", align="right", align="right", align="right", komórka3 komórka4 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", http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 14 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="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 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 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| komórka3 valign="bottom"> Kolor tła 1. W całej tabeli kolor ... 2. W jednym wierszu 3. W pojedynczej komórce 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ądz w pojedynczej komórce. [zobacz: Kolory]. Atrybut BGCOLOR jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów. Przykład:
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:
A B C 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 a b c Aączenie kolumn w grupy gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybutspan="...", przyjmie on domyślną wartość "1". Aączenie kolumn w grupy umo\liwia pózniej 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) x rodzaj ustawienie (zobacz: Wyrównanie zawartości tabeli) 2. Kolor tła (nie obsługuje Netscape 7 i Opera 8) x kolor (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. http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 23 Atrybut BGCOLOR dla znacznika COLGROUP nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów. Przykład: Po wpisaniu:
otrzymamy: komórka2 komórka3 komórka1 komórka5 komórka6 komórka4 Zewnętrzne krawędzie typ ... gdzie jako "typ" nale\y podać: void 1. " " - usuwa zewnętrzne obramowanie Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 above 2. " " - tylko górna krawędz Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 below 3. " " - tylko dolna krawędz http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 24 Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 lhs 4. " " - tylko lewa krawędz Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 rhs 5. " " - tylko prawa krawędz Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 hsides - tylko poziome krawędzie 6. " " Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 vsides - tylko pionowe krawędzie 7. " " Przykład: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 box 8. " " - 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 http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 25 Nie obsługuje Opera 6! Wewnętrzne krawędzie typ ... gdzie jako "typ" nale\y podać: none 1. " " - 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 rows 2. " " - 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 cols 3. " " - 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 all 4. " " - 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 groups - wybrane krawędzie wewnętrzne (grupy). 5. " " Aby skorzystać z tego polecenia, nale\y najpierw podzielić tabelę na grupy (zobacz: Aączenie wierszy w grupy oraz Aą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" . http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 26 Przykład: Po wpisaniu:
otrzymamy: komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 Znacznik 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 . Odpowiadają one za pojedynczą kolumnę, co pozwala nadać jej określone atrybuty, bez dodatkowego łączenia kolumn w grupy:
Zauwa\, \e wewnętrzne obramowanie dzieli tylko grupy kolumn ( ), a nie pojedyncze kolumny ( ): http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 27 komórka1 komórka2 komórka4 komórka3 UWAGA! W ka\dej grupie kolumn ( ) musi być tyle znaczników ile wskazuje atrybut span="..." , nadany całej grupie, chyba \e równie\ dla znacznika nadamy ten atrybut. Nawet jeśli kolumna nie wprowadza \adnych atrybutów, musi się znalezć 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 1 " ". Zagnie\d\anie tabel
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órka2 komórka1C komórka1D komórka3 komórka4 http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Kurs HTML - HTML - Tabele Strona 28 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 TREŚĆ STRONY - Link 1 - Link 2 Jakis tekst... - Link 3 MENU 2 - Link STOPKA Kod, który nale\y wpisać, aby otrzymać ostatnią tabelę, jest następujący:
Quiz Sprawdz swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ. http://www.kurshtml.boo.pl/html/tabele.print.html 2008-02-07 18:46:56 Wyszukiwarka Podobne podstrony: kurs html Kurs HTML HTML BODY i META kurs html(1) Kurs HTML HTML HTML dla zielonych HTML Tabele Kurs HTML HTML Multimedia HTML Tabele HTML 12 2004 kurs html html tabele HTML Tabele Kurs HTML HTML OdsyĹ‚acze kurs tworzenia stron internetowych w języku html html kurs Kurs JavaScript Zdarzenia elementów HTML więcej podobnych podstron | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||