Lekcja Trzecia

Czy to już wszystko?

Oczywiście że nie. Ale nie chcę zrobić z tego kursu "Baśni z 1001 nocy" :-)

Na ostatnią lekcję zachowałem dość szeroki temat, i mam nadzieję, bardzo użyteczny. Pamiętaj jednak, że mój kurs nie ma ambicji nauczenia Cię wszystkiego. Tym tematem są tabelki. Wbrew pozorom, tabelki pozwalają osiągnąć wiele ciekawych efektów, które inaczej byłyby trudne do zrobienia. Postaram się podać odpowiednie przykłady w trakcie tej lekcji.

Na początek, kilka słów objaśnienia. Tabelki to rzecz umowna, służąca do osiągnięcia lepszej kontroli nad rozkładem elementów strony. Oczywiście można zrobić tabelkę wyglądającą jak arkusz kalkulacyjny, ale to nie wszystko. Ja często używam tabelki z jednym tylko polem w środku. Czemu? Bo tabelka może być taką "stroną w stronie", nawet z własnym tłem lub kolorem. Przy użyciu tabelki dużo łatwiej rozplanować co gdzie znajdzie się na stronie i jak jest wyrównane względem siebie.

Do zrobienia tabelki potrzebne są trzy różne kody:

• <TABLE> do zaznaczenia początku tabelki
• <TR> do zaznaczenia rzędu tabelki (dla krzyżówkowiczów: poziomo)
• <TD> do zaznaczenia kolumny tabelki (dla krzyżówkowiczów: pionowo)

No dobrze, dosyć ględzenia, przejdźmy do przykładów.

Najprostsza tabelka:

<TABLE>
<TR><TD>Jak się mówi: komórka czy cela?</TD>
        <TD>I dlaczego mi się to tak źle kojarzy?</TD>
</TR>
<TR><TD>Zaczynamy następny rządek</TD>
        <TD>No i wreszcie jest porządek</TD>
</TR>
</TABLE>

Jak się mówi: komórka czy cela?	I dlaczego mi się to tak źle kojarzy?
Zaczynamy następny rządek	No i wreszcie jest porządek

Tyle tylko, że nie ma ramki. No i co to za tabelka, spytasz. Mówiłem, że to rzecz umowna. Spokojnie, zaraz zrobimy ramki:

<TABLE BORDER=3>
<TR><TD>Teraz mamy ładne ramki</TD>
        <TD>Tu nic nie ma</TD>
</TR>
<TR><TD>Już nie mam pomysłów</TD>
        <TD>co pisać w środku</TD>
</TR>
</TABLE>

Teraz mamy ładne ramki	Tu nic nie ma
Już nie mam pomysłów	co pisać w środku

Zwykle tabelka zajmuje całą szerokość strony. Ale można podać pożądaną szerokość tabelki, przy pomocy parametru WIDTH. Dobrym zastosowaniem tej metody jest, gdy chcesz użyć tło mające coś ozdobnego z boku strony, czego nie chcesz przesłonić. Możesz wtedy tak dobrać szerokość tabelki, żeby pożądane elementy tła były całkowicie widoczne. W każdym przypadku tekst na stronie wygląda lepiej, jeśli pozostawisz po obu stronach marginesy, i wierz mi, najłatwiej zrobić to przy pomocy tabelki o procentowo określonej szerokości. Spójrz na przykłady:

Tabelka o szerokości 45%, z jedną tylko komórką zawierającą tekst (pośrodku strony):<BR>
<CENTER>
<TABLE BORDER=1 WIDTH="45%"><TR><TD>
<CENTER>
Przychodzi baba do lekarza. Lekarz się pyta:<BR>
- Coś dawno pani u mnie nie było?<BR>
Baba:<BR>
- A bo byłam chora.<BR>
</CENTER>
</TD></TR></TABLE>
</CENTER>

Tabelka o szerokości 45%, z jedną tylko komórką zawierającą tekst (pośrodku strony):

Tabelka z dwoma kolumnami, bez ramki, za to z kolorem tła, szeroka na połowę strony:
<TABLE BORDER=0 BGCOLOR="yellow" WIDTH="50%"><TR>
<TD COLSPAN=2 ALIGN="center">Słowniczek polsko-angielski</TD></TR>
<TR><TD>roboty drogowe</TD><TD>street robots</TD></TR>
<TR><TD>golnąć kielicha</TD><TD>to shave a glass</TD></TR>
<TR><TD>zrobić coś bez zwłoki</TD><TD>do something without corpse</TD></TR>
<TR><TD>podpieprzyć (ukraść)</TD><TD>to underpepper</TD></TR>
<TR><TD>ale jaja</TD><TD>but eggs</TD></TR>
<TR><TD>o kurczę!</TD><TD>oh, chicken!</TD></TR>
<TR><TD>pokój z tobą</TD><TD>room with you</TD></TR>
<TR><TD>śrubokręt</TD><TD>screw-ship</TD></TR>
<TR><TD>to nie trzyma się kupy</TD><TD>it doesn't hold the shit</TD></TR>
<TR><TD>my są równe chłopy</TD><TD>we are equal peasants.</TD></TR>
</TABLE>

Tabelka z dwoma kolumnami, bez ramki, za to z kolorem tła, szeroka na połowę strony:

Słowniczek polsko-angielski
roboty drogowe	street robots
golnąć kielicha	to shave a glass
zrobić coś bez zwłoki	do something without corpse
podpieprzyć (ukraść)	to underpepper
ale jaja	but eggs
o kurczę!	oh, chicken!
pokój z tobą	room with you
śrubokręt	screw-ship
to nie trzyma się kupy	it doesn't hold the shit
my są równe chłopy	we are equal peasants.

W powyższym przykładzie wprowadziłem dwie nowe rzeczy: parametr ALIGN, który mówi o tym, jak ma być wyrównywany tekst w komórce tabeli, oraz COLSPAN, który służy do "rozciągnięcia jednej komórki na kilka kolumn. To samo można zrobić z wierszami tabeli, rozciągając komórkę pionowo za pomocą parametru ROWSPAN. Zauważ, że wycentrowanie tekstu w komórce można osiągnąć zarówno przy pomocy parametru ALIGN, jak również kodu CENTER.

To tylko podstawowe przykłady pokazujace, co można osiagnąć przy użyciu tabelek. Na tym etapie posiadasz już podstawową wiedzę na własne eksperymentowanie. Bo tego nie zastąpi nawet najlepiej opracowany kurs. Powodzenia!

---

I tak dobrnęliśmy do końca tego kursu. Mam nadzieję, że był on łatwy i przyjemny. Jeśli masz jakiekolwiek dodatkowe pytania, napisz.