STRUKTURA 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 TD) lub wierszy (znaczniki TR). Należy przy tym zauważyć, że komórki tabeli (TD) znajdują się wewnątrz znacznków wierszy (TR)!

Ilość komórek w każdym wierszu musi być taka sama!

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

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:

Ponadto znaczniki zamykające </TR> oraz </TD> nie są wymagane, tzn. można je pominąć ^* :

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ą, natomiast ostatnia cechuje się największą prostotą zapisu (szczególnie dla obszerniejszej treści). Wybierz tą, która najbardziej Ci odpowiada i stosuj ją konsekwentnie.

UWAGA!
W języku XHTML wszystkie znaczniki muszą być obowiązkowo zamknięte.

Rozmiar i wielkość czcionki (oraz jej rodzaj w Netscape 6) zdefiniowane poza tabelą nie mają 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:

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:

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:

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

Stosowanie tabel ma jedną zasadniczą wadę: Internet Explorer 6 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. Zarówno Netscape jak i Opera potrafią ładować treść tabeli stopniowo, ale Internet Explorer 6 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ć 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):

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ść.

Przy tworzeniu własnego szablonu WWW o bardziej skomplikowanej strukturze może Ci pomóc generator zamieszczony tutaj.

Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądĽ ściętymi rogami. Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie cztery narożniki, np.: 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. W komórce centralnej wpisujemy właściwą treść tabelki:

	Tabelka z zaokrąglonymi rogami

Niestety Netscape 6 ma problemy z wyświetlaniem pustych komórek, ale w Netscape 7 oraz Operze i IE wszystko jest w porządku.

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. Nie zapomnij podać rozmiarów obrazków (atrybuty WIDTH oraz HEIGHT w powyższym kodzie), ponieważ jeśli tego nie zrobisz, efekt może być nieprzewidziany!

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

	CELLSPACING="3" CELLPADDING="0"

OBRAMOWANIE

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

Pierwsze z poleceń jedynie wprowadza obramowanie tabeli (pionowe i poziome linie dzielące poszczególne wiersze oraz komórki) o szerokości domyślnej, natomiast drugie pozwala dodatkowo określić szerokość zewnętrznej części obramowania.

Przykład:

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:

ODSTĘPY MIĘDZY KOMÓRKAMI

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

Znacznik ten umożliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami tabeli.

Przykład:

KOMÓRKI NAGŁÓWKOWE

1. Nagłówek poziomy:
   <TABLE>
   <TR>
        <TH>...</TH>     <TH>...</TH>
   </TR>
   <TR>
        <TD>...</TD>     <TD>...</TD>
   </TR>
   <TR>
        <TD>...</TD>     <TD>...</TD>
   </TR>
   </TABLE>
2. Nagłówek pionowy:
   <TABLE>
   <TR>
        <TH>...</TH>     <TD>...</TD>     <TD>...</TD>
   </TR>
   <TR>
        <TH>...</TH>     <TD>...</TD>     <TD>...</TD>
   </TR>
   </TABLE>
3. Nagłówek mieszany:
   <TABLE>
   <TR>
        <TH></TH>     <TH>...</TH>     <TH>...</TH>
   </TR>
   <TR>
        <TH>...</TH>     <TD>...</TD>     <TD>...</TD>
   </TR>
   <TR>
        <TH>...</TH>     <TD>...</TD>     <TD>...</TD>
   </TR>
   </TABLE>

Komórka nagłówkowa <TH> ma takie samo znaczenie jak zwykła komórka tabeli <TD>. 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 <TD>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli.

Przykład:

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.

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.

TYTUŁ TABELI

Polecenie to stwarza Ci możliwość nadania tytułu tabeli, który może być umiejscowiony na górze (domyślnie) lub na dole tabeli.

Niektóre przeglądarki mają problemy z interpretacją atrybutów ALIGN="left" i ALIGN="right". Dodatkowo Netscape 6 z niewiadowych przyczyn 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:

WYMIARY

1. Wymiary całej tabeli:
   <TABLE WIDTH="x" HEIGHT="y">...</TABLE>
   lub
   <TABLE WIDTH="x%" HEIGHT="y%">...</TABLE>
2. Wymiary pojedynczej komórki:
   <TABLE>
   <TR>
        <TD WIDTH="x" HEIGHT="y">...</TD>
   </TR>
   </TABLE>
   lub
   <TABLE>
   <TR>
        <TD WIDTH="x%" HEIGHT="y%">...</TD>
   </TR>
   </TABLE>

We wszystkich przypadkach "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu.
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 (x%, y%). Natomiast jeżeli tabela ma mieć stały rozmiar bezwzględny (zawsze tyle samo pikseli), musimy podawać długość i wysokość w pikselach ekranowych (x, y). 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:

WYRÓWNANIE 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).

Przykład:

WYRÓWNANIE ZAWARTOŚCI TABELI

1. Wyrównanie zawartości całego wiersza:
   <TABLE>
   <TR ALIGN="rodzaj" VALIGN="ustawienie">...</TR>
   </TABLE>
2. Wyrównanie zawartości pojedynczej komórki:
   <TABLE>
   <TR>
        <TD ALIGN="rodzaj" VALIGN="ustawienie">...</TD>
   </TR>
   </TABLE>

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

Przykład:

KOLOR TŁA

1. W całej tabeli:
   <TABLE BGCOLOR="kolor">...</TABLE>
2. W jednym wierszu:
   <TABLE>
   <TR BGCOLOR="kolor">...</TR>
   </TABLE>
3. W pojedynczej komórce:
   <TABLE>
   <TR>
        <TD BGCOLOR="kolor">...</TD>
   </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 jestzdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Przykład:

TŁO OBRAZKOWE

1. W całej tabeli:
   <TABLE BACKGROUND="ścieżka dostępu">...</TABLE>
2. W pojedynczej komórce:
   <TABLE>
   <TR>
        <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:

KOLOR OBRAMOWANIA

1. W całej tabeli:
   1. <TABLE BORDERCOLOR="kolor">...</TABLE>
   2. <TABLE BORDERCOLORLIGHT="kolor1">...</TABLE>
   3. <TABLE BORDERCOLORDARK="kolor2">...</TABLE>
   
   
2. W jednym wierszu:
   1. <TABLE>
      <TR BORDERCOLOR="kolor">...</TR>
      </TABLE>
   2. <TABLE>
      <TR BODERCOLORLIGHT="kolor1">...</TR>
      </TABLE>
   3. <TABLE>
      <TR BORDERCOLORDARK="kolor2">...</TR>
      </TABLE>
   
   
3. W pojedynczej komórce:
   1. <TABLE>
      <TR>
           <TD BORDERCOLOR="kolor">...</TD>
      </TR>
      </TABLE>
   2. <TABLE>
      <TR>
           <TD BORDERCOLORLIGHT="kolor1">...</TD>
      </TR>
      </TABLE>
   3. <TABLE>
      <TR>
           <TD BORDERCOLORDARK="kolor2">...</TD>
      </TR>
      </TABLE>

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.

Przykład:

gdzie odpowiednie kolory oznaczają:
• navy - granatowy
• aqua - akwamaryna
• maroon - kasztanowy
• red - czerwony
• lime - limonowy

BLOKADA ZAWIJANIA TEKSTU

Polecenia takie 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.

Przykład:

ŁˇCZENIE KOMÓREK

1. Poziome łączenie komórek:
   <TABLE>
   <TR>
        <TD COLSPAN="x">...</TD>
   </TR>
   </TABLE>

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

2. Pionowe łączenie komórek:
   <TABLE>
   <TR>
        <TD ROWSPAN="y">...</TD>
   </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 <TD>, ponieważ komórka połączona rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. Każdy atrybut COLSPAN="n" lub ROWSPAN="n" eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach).

Przykład:

ŁˇCZENIE WIERSZY W GRUPY

Łą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:
   <TBODY ALIGN="rodzaj" VALIGN="ustawienie">...</TBODY>
   (zobacz: Wyrównanie zawartości tabeli)
   
   
2. Kolor tła (nie obsługuje Opera 7):
   <TBODY BGCOLOR="kolor">...</TBODY>
   (zobacz: Kolor tła)
   
   
3. Usunąć część krawędzi wewnętrznych w tabeli:
   
   (zobacz: Wewnętrzne krawędzie)

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

Przykład:

Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole (bez względu gdzie je wpiszemy). Nagłówek tworzymy, przy użyciu: <THEAD>...</THEAD>, natomiast stopkę: <TFOOT>...</TFOOT>:

W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną ilość znaczników <TBODY> (pozwala to usnąć wewnętrzne krawędzie w grupach).

ŁˇCZENIE KOLUMN W GRUPY

gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut SPAN, przyjmie on domyślną wartość "1".

Łą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):
   <COLGROUP SPAN="x" ALIGN="rodzaj" VALIGN="ustawienie">
   (zobacz: Wyrównanie zawartości tabeli)
   
   
2. Kolor tła (nie obsługuje Netscape 7 i Opera 7):
   <COLGROUP SPAN="x" BGCOLOR="kolor">
   (zobacz: Kolor tła)
   
   
3. Usunąć część krawędzi wewnętrznych w tabeli:
   
   (zobacz: Wewnętrzne krawędzie)

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

Przykład:

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Ľ

   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

   
   

Nie obsługuje Opera 6, natomiast w Operze 7 wszystko oprócz RULES="groups" jest w porządku.

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

Przykład:

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

Zauważ, że wewnętrzne obramowanie dzieli tylko grupy kolumn (COLGROUP), a nie pojedyncze kolumny (COL):

UWAGA! W każdej grupie kolumn (COLGROUP) 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 "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:

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

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