W poprzedniej czesci FAQ dowiedzieliscie sie, jak zrobic tabelke, jak zrobic w niej kolumny, jak dodac obramowanie oraz kolor tla. Czas na ciag dalszy. Przypominam, ze dalej jest to poradnik dla poczatkujacych, wiec daruje sobie np. podawanie szerokosci tabeli jako * itp... :)
1. Szerokosc tabelki oraz kolumn
Uwaga! Istnieja dwa sposoby podawania szerokosci tabelek:
- w pikselach (np. "600")
- w procentach (np. "60%").
Roznica polega na tym, ze rozmiar w pikselach jest "sztywny", staly; natomiast rozmiar w procentach nie - jesli bedziemy zmieniac rozmiar okna przegladarki, to rozmiar tabelki "procentowej" bedzie sie dostosowywal, a tabelka "pikselowa" bedzie ciagle taka sama, najwyzej pojawi sie suwak przewijania.
Do Was nalezy wybor, ktory sposob wybierzecie. Po prostu musicie sprawdzic, jak Wasza tabelka wyglada w duzym oknie przegladarki (zmaksymalizowane), jak wyglada w oknie pomniejszonym... Pamietajcie, ze ludzie ogladajacy Wasza strone maja rozne rozdzielczosci ekranu, np. 800x600 albo 1024x768. Nie utrudniajcie im zycia, najlepiej poproscie zeby ktos obejrzal Wasza tabelke na innym komputerze i zeby powiedzial Wam, czy jest ona "poreczna".
Ale do rzeczy :)
Zeby podac szerokosc, musimy najpierw podac szerokosc calej tabelki, a potem rozdzielic te laczna szerokosc miedzy poszczegolne kolumny.
Atrybut ustalajacy szerokosc tabelki to width.
Na przyklad chcemy zrobic tabelke o szerokosci 500 pikseli, w ktorej pierwsza kolumna bedzie miala 350 pikseli, a druga - 150.
<table border="1" bordercolor="#000000" width="500">
<td width="350">tresc w pierwszej kolumnie</td>
<td width="150">tresc w drugiej kolumnie</td>
</table>
Teraz wyglada to tak:
tresc w pierwszej kolumnie
tresc w drugiej kolumnie
2. Wyrownanie tekstu
Zapewne zauwazyliscie, ze tekst w pierwszej kolumnie jest wyrownany do srodka. Mozna to zmienic i "przerzucic" tekst np. do gory (to bardzo przydatna opcja - np. zeby linki nie "gubily sie" Wam gdzies posrodku dluuugiej kolumny...
Do wyrownywania tekstu stosujemy atrybut valign. Postawowe mozliwosci:
- valign="top" - wyrownanie do gory
- valign="middle" - wyrownanie do srodka
- valign="bottom" - wyrownanie do dolu.
Przykladowo wyrownajmy tekst w pierwszej kolumnie naszej tabelki do dolu:
<table border="1" bordercolor="#000000" width="500">
<td width="350" valign="bottom">tresc w pierwszej kolumnie</td>
<td width="150">tresc w drugiej kolumnie</td>
</table>
Teraz wyglada to tak:
tresc w pierwszej kolumnie
tresc w drugiej kolumnie
3. Odleglosc miedzy tekstem a krawedzia tabelki
Mozna ustalic, ile wolnego miejsca (w pikselach) ma zostac miedzy tekstem a obramowaniem. Sluzy do tego atrybut cellpadding. Mozna go dodawac do calej tabelki albo np. tylko do jednej kolumny.
Przykladowo, w calej naszej tabelce ustalmy ten odstep na 15 pikseli:
<table border="1" bordercolor="#000000" width="500" cellpadding="15">
<td width="350">tresc w pierwszej kolumnie</td>
<td width="150">tresc w drugiej kolumnie</td>
</table>
Teraz wyglada to tak:
tresc w pierwszej kolumnie
tresc w drugiej kolumnie
4. Tlo z obrazka
Mozna zrobic tak, by cala tabelka (albo konkretna kolumna) miala tlo nie w postaci koloru, ale obrazka. Oczywiscie pierwsza rzecz to to, ze musicie ten obrazek miec ;) i znac jego adres (tzw. URL).
W przykladzie dodam tlo tylko do lewej kolumny, bedzie to tlo z obrazka http://akson.sgh.waw.pl/~mk20292/forum/tlo.gif.
Do dodawania tla uzywamy atrybutu background.
<table border="1" bordercolor="#000000" width="500">
<td width="350" background="http://akson.sgh.waw.pl/~mk20292/forum/tlo.gif">tresc w pierwszej kolumnie</td>
<td width="150">tresc w drugiej kolumnie</td>
</table>
Teraz wyglada to tak:
tresc w pierwszej kolumnie
tresc w drugiej kolumnie
PS. Wszystkie tabelki w wyzej wymienionych przykladach znajduja sie na srodku strony, poniewaz przed tabelka dalam komende <center>, a po tabelce - </center>.