Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Tabele

Uwaga: Jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika



[hand]Ogólne ramy tabeli

<TABLE> </TABLE>

Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.


[hand]Wiersz tabeli

<TR> </TR>

Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:

<TABLE>

<TR> </TR>

<TR> </TR>

<TR> </TR>

</TABLE>


[hand]Komórka w wierszu

<TD> </TD>

Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:

<TABLE>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

<TR> <TD> </TD><TD> </TD><TD> </TD></TR>

</TABLE>

Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza.


Przykład:

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwiłę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna.


[hand]Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

<TABLE BORDER> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę (Netscape), na przykład:

<TABLE BORDER=10> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Obramowanie komórek

Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami).

<TABLE BORDER CELLSPACING=8> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Marginesy dla komórek

Jeśli uznamy, że odstęp między wartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1).

<TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną.

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

W ramach "zabaw estetycznych" można by wykorzystać definicję tabeli do utworzenia przycisku, jako elementu graficznego.


[hand]Szerokość tabeli

Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Parametr WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpływają na szerokość tabeli na ekranie.

<TABLE BORDER WIDTH=600> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.

<TABLE BORDER WIDTH=50%> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Szerokość komórki

Parametr WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>. Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu (akceptują ją Navigator i Internt Explorer, ale polecenie nie wchodzi w zakres HTML 3.2).

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Wyrównanie tabeli

Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład:

<TABLE BORDER ALIGN=right> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

W nowym cyklu poświęconym Internetowi postaramy się przedstawić Internet w sposób jak najbardziej praktyczny, służąc radą niedoświadczonemu Czytelnikowi, który dopiero stawia pierwsze kroki w światowej sieci.

Praca z wykorzystaniem Internetu jest naprawdę prosta, a trudność stanowi raczej "przełknięcie" oferowanego bogactwa, które wsysa w sposób bezpośrednio zagrażający naszej kieszeni. Bardzo łatwo bowiem zapomnieć o całym świecie, narażając się na wydatnie podwyższone rachunki telefoniczne (albo protest osób zarządzających lokalną siecią komputerową), a także wyrzuty znajomych usiłujących się w tym czasie do nas dodzwonić.

Nacisk położymy oczywiście na wersję graficzną Internetu, gdyż tylko ona daje pełny dostęp do zasobów sieci. Tryb tekstowy jest zubożony o cały graficzny sztafaż, nie tylko uprzyjemniający i znacznie ułatwiający nawigowanie, ale i dostarczający sporą dawkę informacji. Trudno przecież czytać o zasobach Luwru - trzeba je zobaczyć.

Jak widać, tekst wstawiony za definicją tabeli "oblewa" ją z jednej lub drugiej strony, zależnie od rodzaju wyrównania.

<TABLE BORDER=10 ALIGN=left> </TABLE>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

W nowym cyklu poświęconym Internetowi postaramy się przedstawić Internet w sposób jak najbardziej praktyczny, służąc radą niedoświadczonemu Czytelnikowi, który dopiero stawia pierwsze kroki w światowej sieci.

Praca z wykorzystaniem Internetu jest naprawdę prosta, a trudność stanowi raczej "przełknięcie" oferowanego bogactwa, które wsysa w sposób bezpośrednio zagrażający naszej kieszeni. Bardzo łatwo bowiem zapomnieć o całym świecie, narażając się na wydatnie podwyższone rachunki telefoniczne (albo protest osób zarządzających lokalną siecią komputerową), a także wyrzuty znajomych usiłujących się w tym czasie do nas dodzwonić.

Nacisk położymy oczywiście na wersję graficzną Internetu, gdyż tylko ona daje pełny dostęp do zasobów sieci. Tryb tekstowy jest zubożony o cały graficzny sztafaż, nie tylko uprzyjemniający i znacznie ułatwiający nawigowanie, ale i dostarczający sporą dawkę informacji. Trudno przecież czytać o zasobach Luwru - trzeba je zobaczyć.


[hand]Poziome wyrównanie danych w komórkach

Parametr ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - środkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji
<TD ALIGN=center></TD>
<TD ALIGN=left> </TD>

<TD ALIGN=right> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość komórki za pomocą WIDTH.

a1 - do leweja2 - środkowaniea3 - do prawej
b1 - do lewejb2 - środkowanieb3 - do prawej
c1 - do lewejc2 - środkowaniec3 - do prawej

[hand]Wysokość tabeli

Możemy zdefiniować nie tylko szerokość, ale i wysokość tabeli (nie jest to legalna opcja HTML 3.2), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%">

Komórka a1 Komórka a2
Komórka a3Komórka a4

[hand]Pionowe wyrównanie danych w komórkach

Parametr VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji:
<TD VALIGN=top> </TD>
<TD VALIGN=middle> </TD>

<TD VALIGN=bottom> </TD>.
Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość tabeli za pomocą HEIGTH.

a1 - do górnego brzegu a2 - do górnego brzegu a3 - do górnego brzegu
b1 - do górnego brzegu b2 - do dolnego brzegu b3 - do środka

[hand]Wiersze i akapity w komórkach

Tekst w komórce może być podzielony na wiersze i akapity. Wykorzystujemy w tym celu znaczniki <P> </P> dla akapitów i <BR> dla wierszy. Tekst objęty znacznikami akapitów jest oddzielony od innych akapitów. Znacznik <BR> pozwala opuścić tekst o jeden wiersz w dół, w ramach tego samego akapitu. Znaczniki umieszczamy w ramach definicji poszczególnych komórek, obejmując nimi fragmenty tekstu (akapit) lub wstawiając między wyrazy (znacznik końca wiersza).

W nowym cyklu poświęconym Internetowi postaramy się przedstawić Internet w sposób jak najbardziej praktyczny, służąc radą niedoświadczonemu Czytelnikowi, który dopiero stawia pierwsze kroki w światowej sieci.

Praca z wykorzystaniem Internetu jest naprawdę prosta,
a trudność stanowi raczej "przełknięcie" oferowanego bogactwa, które wsysa w sposób bezpośrednio zagrażający naszej kieszeni.

Bardzo łatwo bowiem zapomnieć o całym świecie, narażając się na wydatnie podwyższone rachunki telefoniczne
(albo protest osób zarządzających lokalną siecią komputerową),
a także wyrzuty znajomych usiłujących się w tym czasie do nas dodzwonić.

Nacisk położymy oczywiście na wersję graficzną Internetu, gdyż tylko ona daje pełny dostęp do zasobów sieci.
Tryb tekstowy jest zubożony o cały graficzny sztafaż, nie tylko uprzyjemniający i znacznie ułatwiający nawigowanie, ale i dostarczający sporą dawkę informacji.
Trudno przecież czytać o zasobach Luwru - trzeba je zobaczyć.


[hand]Kolor tła tabeli

Microsoft Internet Explorer i Nescape Communicator pozwalają wykorzystać kolor tła tabeli (wykracza to poza standard HTML 3.2). W tym celu należy w definicji tabeli dodać parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow>

.

Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver (silver), Yellow, Aqua



a1 - do górnego brzegu a2 - do górnego brzegu a3 - do górnego brzegu
b1 - do górnego brzegu b2 - do dolnego brzegu b3 - do środka

Możemy również "pomalować" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" - polecenie to nie wchodzi w zakres standardu HTML 3.2.

a1 - do górnego brzegu a2 - do górnego brzegu a3 - do górnego brzegu
b1 - do górnego brzegu b2 - do dolnego brzegu b3 - do środka

Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka, stosując polecenie (wykraczające poza standard HTML 3.2):

<table background="nazwa_obrazka">

111 222 333
444 555 666
777 888 999


[hand]Kolor obramowania tabeli

Microsoft Internet Explorer interpretuje także kolor obramowania tabeli. W definicji tabeli należy wstawić parametr <BORDERCOLOR=barwa>, np. <TABLE BORDER=5 BORDERCOLOR=red>.

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

[hand]Odcień obramowania tabeli

Microsoft Internet Explorer pozwala określić kolor cienia obramowania tabeli. Zauważmy, że cień konkretnego brzegu komórki dzieli się na dwie części: jasną - z lewej lub u góry, oraz ciemną - z prawej lub u dołu. Mamy optyczne wrażenie, jakbyśmy patrzyli na komórkę z lewej strony i od góry. Możemy nadać odrębną barwę cieniowi lewemu i górnemu oraz odrębną prawemu i dolnemu. Na przykład:

<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>

a1a2a3a4a5
b1b2b3b4b5
c1c2c3c4c5

Jeszcze wyraźniej widać to w przypadku pojedynczej komórki.

pojedyncza komórka

Definicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład:

<TR BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórkaDruga komórka
Trzecia komórkaCzwarta komórka

lub

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

Pierwsza komórkaDruga komórka

[hand]Podpis pod tabelą

Tabela powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION ALIGN=top>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u góry
a1a2a2
b1b2b3

lub

Tytuł tabeli umieszczony u dołu
a1a2a2
b1b2b3

Microsoft Internet Explorer pozwala dodatkowo dosunąć podpis do lewej lub prawej strony, przy użyciu parametru VALIGN. Na przykład:

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=top ALIGN=left>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u góry i z lewej strony
a1a2a2
b1b2b3

a także

<TABLE BORDER WIDTH=300>
<CAPTION VALIGN=bottom ALIGN=right>Tytuł tabeli umieszczony u góry</CAPTION>

Tytuł tabeli umieszczony u dołu i z prawej strony
a1a2a2
b1b2b3

[hand]Nagłówek wiersza i kolumny

Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej. Na przykład:

Wzrost produkcji w latach 1991-1995 (w mln USD)
19911992199319941995
11501240138014201550

Nagłówek jest definiowany za pomocą parzystego kodu <TH> </TH>. Tak więc, aby sporządzić powyższą tabelę, z wierszem nagłówków kolumn i wierszem danych, należy wprowadzić następujący kod:

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji w latach 1991-1995 (w mln USD)</CAPTION>

<TR><TH>1991</TH> <TH>1992</TH><TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

</TABLE>

Pierwszy wiersz, jak widzimy, składa się z samych nagłówków kolumn (kolejne lata). W drugim znajdują się dane liczbowe.

Podobnie, choć nieco inaczej, należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem.

<TABLE BORDER CELLPADDING=10 WIDTH=400>

<CAPTION>Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</CAPTION>

<TR><TD></TD><TH>1991</TH> <TH>1992</TH> <TH>1993</TH> <TH>1994</TH> <TH>1995</TH> </TR>

<TR ALIGN=center><TH>Masło</TH> <TD>1150</TD><TD>1240</TD><TD>1380</TD><TD>1420</TD><TD>1550</TD></TR>

<TR ALIGN=center><TH>Margaryna</TH> <TD>800</TD><TD>900</TD><TD>980</TD><TD>1150</TD><TD>1320</TD></TR>

</TABLE>

co da w rezultacie:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
19911992199319941995
Masło11501240138014201550
Margaryna80090098011501320

W wierszach z danymi liczbowymi wystarczyło wstawić kody nagłówków (Masło i Margaryna), zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi.

Zauważmy też, że wiersz nagłówków z latami został poprzedzony pustą komórką, dzięki czemu nagłówki zostały we właściwy sposób ułożone w stosunku do kolumn z danymi. Gdybyśmy chcieli, aby ta pusta komórka była "wklęsła", możemy w niej wstawić "lepką spację", czyli kod &nbsp; (non-breaking space).

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 19911992199319941995
Masło11501240138014201550
Margaryna80090098011501320

[hand]Łączenie komórek

Komórki danych i nagłówków można ze sobą łączyć. Na przykład:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 19911992199319941995
Masło19502120138014201550
Margaryna98011501320

W powyższym przykładzie, znając łączną produkcję tłuszczów, ale nie znając jej struktury, przedstawiliśmy łączne dane dla dwóch kolejnych lat - 1991 i 1992.

Aby komórka w danym wierszu rozciągała się na x kolumn, należy użyć w jej definicji parametru <TD ROWSPAN=x>. W naszej tabeli zostały opatrzone parametrem ROWSPAN=2 dwie pierwsze komórki z danymi w wierszu Masło (i oczywiście podana łączna produkcja tłuszczów). Jednocześnie zostały usunięte dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata 1993-1995) dostosowały się do odpowiednich komórek w wierszu Masło.

Podobnie można łączyć komórki z nagłówkami:

Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)
 1991-19921993-1995
Masło23904350
Margaryna80090098011501320

W przykładzie zostało pokazane poziome łączenie komórek, za pomocą parametru <TD COLSPAN=x>.Połączono w ten sposób komórki nagłówków z latami i komórki dotyczące produkcji masła, której czasowej struktury nie znamy.

I jeszcze jeden przykład:

Wzrost produkcji tłuszczów i przetworów owocowych
w latach 1991-1995 (w mln USD)
 Produkt19911992199319941995
TłuszczeMasło11501240138014201550
Margaryna80090098011501320
Przetwory owocoweDżem75084088010201150
Marmolada400500570750820

[hand]Zagnieżdżanie tabel

Możliwe jest zagnieżdżanie tabel w komórkach nadrzędnej tabeli. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach <TD> </TD>. Na przykład:


100200300
AAABBB
CCCDDD
400500600

Łatwo dostrzec, że tabela złożona z dwóch wierszy i dwóch kolumn została zagnieżdżona w komórce z wartością 300.


[hand]Grafika w komórkach tabeli

W komórce tabeli można umieścić nie tylko tekst, ale i grafikę (w formacie GIF lub JPG), a także animację Marquee (interpretowaną przez Internet Explorera). W definicji komórki należy podać źródło grafiki, na przykład:

[Aligator][Wykład][hand]

Odpowiednie polecenie powinno mieć postać: <TD> <IMG SRC=nazwa_pliku> </TD>

Jeśli życzymy sobie, aby grafika w tabeli miała inne rozmiary niż grafika w postaci oryginalnej, możemy podać jej szerokość i wysokość, np.:

<TD> <IMG SRC=nazwa_pliku HEIGHT=xx></TD>

lub

<TD> <IMG SRC=nazwa_pliku WIDTH=yy></TD>.

lub

<TD> <IMG SRC=nazwa_pliku HEIGHT=xx WIDTH=yy></TD>.

[Aligator][Wykład][hand]

[hand]Tabele - nagłówek, ciało i stopka

Rozszerzenia języka zawierają kilka ciekawych poleceń w definicjach tabel. Podobnie jak cały dokument, także i tabela może mieć swoją część nagłówkową, część główną i stopkę. Elementy te są przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli:

<TABLE WIDTH=50% BORDER=5 CELLPADDING=5>
<THEAD>To jest część nagłówkowa</THEAD>
<TBODY>
<TR>
<TD>Komórka 11</TD>
</TR>
<TR>
<TD>Komórka 21</TD>
</TR>
</TBODY>
<TFOOT>To jest stopka</TFOOT>
</TABLE>

Znaczniki zamykające są opcjonalne we wszystkich trzech poleceniach.


[hand]Obramowanie tabel i komórek w rozszerzeniach języka

Rozszerzenia Internet Explorera (wykraczające poza HTML 3.2) zawierają szereg nowych poleceń pozwalających zdefiniować sposób wyświetlania obramowania tabel i komórek.

Wyjdźmy od podstawowej definicji tabeli, zawierającej, przykładowo, 3 wiersze i 3 kolumny. W definicji tabeli znajduje się także obramowanie. <TABLE BORDER>

a1 a2 a3
b1 b2 b3
c1 c2 c3


Seria znaczników FRAME= pozwala wyświetlać w specjalny sposób obramowanie tabeli. Polecenie FRAME wstawiamy bezpośrednio do definicji tabeli, czyli <TABLE BORDER FRAME=cośtam>.

FRAME=void pozwala usunąć zewnętrzne obramowanie tabeli.

a1 a2 a3
b1 b2 b3
c1 c2 c3

FRAME=above wstawia górną krawędź obramowania, a FRAME=below - dolną.

a1 a2 a3
b1 b2 b3
c1 c2 c3

a1 a2 a3
b1 b2 b3
c1 c2 c3

FRAME=vsides wyświetla lewą i prawą krawędź obramowania tabeli, a FRAME=hsides - górną i dolną.

a1 a2 a3
b1 b2 b3
c1 c2 c3

a1 a2 a3
b1 b2 b3
c1 c2 c3

FRAME=lhs wyświetla lewą krawędź obramowania, a FRAME=rhs - prawą.

a1 a2 a3
b1 b2 b3
c1 c2 c3

a1 a2 a3
b1 b2 b3
c1 c2 c3

FRAME=box wyświetla wszystkie krawędzie obramowania.

a1 a2 a3
b1 b2 b3
c1 c2 c3

Pamiętajmy, że cały czas są niezależnie od tego wyświetlane wewnętrzne linie, dzielące komórki tabeli. Obecność BORDER pozwala definiować obramowanie. Linie te możemy jednak także osobno definiować, o czym będzie mowa niżej.


Seria znaczników RULES= pozwala manipulować wewnętrznymi liniami tabeli.

<TABLE BORDER RULES=cośtam>

RULES=none powoduje usunięcie linii wewnętrznych.

a1 a2 a3
b1 b2 b3
c1 c2 c3

RULES=groups powoduje wyświetlenie tylko linii wewnętrznych dzielących część nagłówka, ciała i stopki tabeli oraz grup kolumn. Groups zastąpiły proponowane poprzednio polecenie basic.

Istotna informacja o kolumnach i grupach kolumn

W tabeli (zaraz za poleceniem <TABLE>) możemy definiować grupy kolumn, używając polecenia COLGROUP SPAN (grupa) lub COL (pojedyncza kolumna). Przykładowo:

<COLGROUP SPAN=4 ALIGN=center> spowoduje wydzielenie grupy 4 kolumn (span=4) i środkowanie ich zawartości.
<COL ALIGN=RIGHT> spowoduje wydzielenie 1 kolumny i wyrównanie jej zawartości do prawego marginesu.

Możemy zagnieżdżać definicje grup kolumn:

<COLGROUP>
     <COL ALIGN=RIGHT>
     <COL ALIGN=LEFT>
<COLGROUP>
     <COL ALIGN=CENTER>

Pierwszy wiersz powoduje wydzielenie pierwszej grupy kolumn. Drugi wiersz definiuje parametry pierwszej kolumny w grupie. Trzeci wiersz definiuje parametry drugiej kolumny w grupie. Czwarty wiersz wydziela drugą grupę kolumn. Piąty wiersz definiuje parametry pierwszej kolumny w drugiej grupie. Cechy definiowanych kolumn mają pierwszeństwo przed cechami grup kolumn.

Przykładowa tabela, łącząca polecenia COLGROUP i RULES=GROUPS.

<TABLE border cellpadding=5 frame=void RULES=groups>
<COLGROUP SPAN=1 ALIGN=left>
<COLGROUP SPAN=4 ALIGN=center>
...

Pierwszy wiersz definiuje obramowanie, usuwa obramowanie zewnętrzne (frame=void) i definiuje obramowanie grup wierszy i kolumn (rules=groups).
Drugi wiersz wydziela grupę kolumn (de facto jedną) dla potrzeb nagłówków wierszy.
Trzeci wiersz wydziela grupę 4 kolumn dla potrzeb danych liczbowych.

W efekcie uzyskamy przykładową tabelę:

produkcja1993199419951996
śliwki1,21,30,91,5
gruszki0,81,11,40,5
jabłka3,12,72,23,0
czereśnie0,40,30,60,5
wiśnie0,20,40,30,6
w mln ton 

RULES=rows powoduje wyświetlenie tylko poziomych linii wewnętrznych.

a1 a2 a3
b1 b2 b3
c1 c2 c3

RULES=cols powoduje wyświetlenie tylko pionowych linii wewnętrznych.

a1 a2 a3
b1 b2 b3
c1 c2 c3

RULES=all powoduje wyświetlenie wszystkich linii wewnętrznych.

a1 a2 a3
b1 b2 b3
c1 c2 c3

Źródła:
  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier