Nyomtatható változat

          Ha rendet akarunk egy picit teremteni az oldalunkon, akkor arra a legalkalmasabb, ha táblázatba rendezzük az egyes elemeket, midegy, hogy látszik-e, vagy nem-e, hogy táblázatba van rendezve minden. A táblázat készítésére a <table>,</table> TAG-párt kell segítségül hívnunk ( table = tábla, táblázat). Nem úgy mûködik a táblázatszerkesztés, hogy elõre megadjuk, hogy "hányszor hányas" táblázatot szeretnénk, mert az nem ad nagy szabadságot a változtatásokra. Ezért szabadon szerkezthetjük celláink számát. A táblázatkezelés soronként dolgozik. Tehát ha én egy 2 soros, 3 oszlopos táblázatot szeretnék, akkor ezen logika szerint elõször leírom az elsõ sor elemeit, majd a második sor elemet, majd a harmadikét. Minden sort ki kell nyitnom és be kell zárnom, jelezve, hogy megkeztem ill. végeztem egy sorral. A sor-nyitásra, -zárásra, így a <tr> </tr> TAG-ek jutnak ( tr = table row= tábla sor). A sorokon belül már nem az oszlopokkal fogallakozom, úgymond, hanem már elemeknek nevezem, ill. adatotak a sor egyes celláit. Azonban fontos, hogy ha pontos táblázatot akarunk készíteni, mindig ugyanannyi cellát rakjuk minden egyes sorba. Az cellát a következõ TAG jelzi: <td> </td> ( td = table data= tábla adat).

<table> <tr><td>1. sor 1. elem</td> <td>1. sor 2. elem</td> <td>1. sor 3. elem</td></tr> <tr><td>2. sor 1. elem</td> <td>2. sor 2. elem</td> <td>2. sor 3. elem</td></tr> <tr><td>3. sor 1. elem</td> <td>3. sor 2. elem</td> <td>3. sor 3. elem</td></tr> </table>

1. sor 1. elem 1. sor 2. elem 1. sor 3. elem 2. sor 1. elem 2. sor 2. elem 2. sor 3. elem 3. sor 1. elem 3. sor 2. elem 3. sor 3. elem

          A fenti példán észrevehetjük, hogy a keletkezett táblázat egyes elemei nem nagyon távolódnak el egymástól, sõt nem is látjuk a cellákat elválasztó vonalat sem. Ezeket és más táblázatbeállításokat a <table> TAG egyes paraméterei fejezik ki. Ezekrõl lesz szó a továbbiakban.

A táblázat kerete:
Az elõzõ leckében is volt olyanról szó, hogy a képeknek is lehet keretük. Ugyanazt kell itt a táblázatnál is tenni. A paraméter neve ezek szerint akkor a border ( border = keret), amelynek értéki nulláról indul és pozitív egész szám (ha nem állítunk be semmit, akkor mint az elõzõ példán is láttuk a border alapértelmezetben 0, vagyis nincs keret). Ha nem állítunk be semmilyen színt a táblázatunk keretének, akkor annak 3D-os kerete lesz, ha viszont egy szolid színnel szeretnénk táblázatunk egyes elemeit elválasztani, akkor ezt is megtehetjük. Egy újabb paramétere a <table> TAG-nek, a bordercolor ( bordercolor = keret-szín). Ennek értéke lehet a fõbb színek angol nevei, vagy a szín hexadecimális kódja (A színekrõl bõvebben a 8. Színek fejezetbe olvashatsz).

<table border="1"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" bordercolor="red"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

A táblázaton belüli margózás:
Az eddigi példákban láthattuk, hogy sem az egyes cellák közti távolság, sem a cellákon belüli margók nem definiáltak, így eléggé sûrítetettek lettek az eddig készített táblázatok. Mint ahogy az elõzõ mondatban is külön említettem, meg lehet különbõztetni két fajta margózást: az elsõ, hogy a cellák között mekkora távolság van, tehát az adatok egy picit eltávolódnak egymástól. Ennek paramétere a cellspacing ( cellspacing = cellák közötti távolság). Értékeire ugyanaz jellemzõ, mint a border paraméternél. A másik fajta margózás alatt azt értjük, hogy a cellán belüli adat mekkora távolságra van az õt körülvevõ kerettõl. Ezt jelzi a cellpadding ( cellpadding = cellák bélelése), mértékegysége mint a cellspacing-nél.

<table border="1" cellspacing="10"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" cellpadding="10"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" bordercolor="red" cellpadding="10" cellspacing="10"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

A táblázat háttere:
Ha azt akarjuk, hogy egy kicsit hangulatosabb legyen a táblázat, például azzal tudjuk elérni, hogy a háttere nem egyezik meg az oldalunk hátterével, akár képrõl, akár színrõl legyen szó. A hátteret adhatunk az egész táblázatnak, vagy csak ez egyik cellának, vagy vegyíteni is lehet. A háttérszínt úgyanúgy mint máshol a színeket, angol nevükkel vagy hexadecimális kódjukkal adjuk meg. Ilyenkor használjuk a bgcolor paramétert ( bgcolor = background color = háttérszín). Ha esetleg háttérképet szeretnénk berakni, akkor, a background paraméter után a kép-fájl nevét adjuk meg, mint paraméter-értéket ( background = háttér). Amint az elõbb is említve volt, ez a kettõ mind az egész táblázatra vonatkoztatható, vagy csak egyes celláira, vagyis a paramétereket beírhatjuk mind a <table>, mind a <td> TAG-ekhez.

<table border="1" cellpadding="7" bordercolor="black" bgcolor="orange"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" bordercolor="black" cellpadding="7"> <tr><td bgcolor="orange">1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td bgcolor="green">4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" cellpadding="7" bordercolor="black" bgcolor="gray"> <tr><td>1. elem</td> <td bgcolor="darkred">2. elem</td></tr> <tr><td bgcolor="green">3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

<table border="1" cellpadding="7" bordercolor="black" background="alma.jpg"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

A tábázat neve:
A táblázatnak nevet is adhatunk, melyet a <caption> </caption> TAG-ek közé kell zárni, amelyet a <table> TAG után kell írni. Ez a név meg fog jelenni a táblázat tetején vagy az alján, attól függõen, hogy mit állítunk be. Ennek a paraméternek a neve, pont ugyanúgy, mint a bekezdés-, vagy kép-igazításnál: az align ( align = igazítás). Az align értéke kétféle lehet: top és bottom ( top = felül; bottom = alul).

<table border="1" cellpadding="10"> <caption align="top">Ez a táblázat neve</caption> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

Ez a táblázat neve 1. elem 2. elem 3. elem 4. elem

<table border="1" cellpadding="10"> <caption align="bottom">Ez a táblázat neve</caption> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td>3. elem</td> <td>4. elem</td></tr> </table>

Ez a táblázat neve 1. elem 2. elem 3. elem 4. elem

A tábázat igazításai:
A táblázat igazítása kétféle lehet: maga a táblázat igazítása és a táblázaton belüli igazítás. Magát a táblázatot is tudjuk igazítani, hogy merre igazodjon az oldalon. Itt is a megszokott align paramétert használjuk, mint a <table> TAG egy paramétere. Értéke lehet: left, center, right ( left = bal; center = közép; right = jobb). Ugyanezt a paramétert használhatjuk a táblázaton belüli igazításra is, így a <td> paramétere lesz. Tehát a nem kell egy cellán belül bekezdést használni ahhoz, hogy a benne levõ szöveg igazodjon valamerre, hanem az egész cellára vonatkoztathatunk igazítást, mint ahogy az elõbb már olvasható volt.

<table border="1" cellpadding="10" align="right"> <tr><td align="left">1. elem</td> <td align="center">2. elem</td></tr> <tr><td align="right" >3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

Ha az egyik cellában nagyon sokat írunk, és a mellette levõben kevés van, akkor az elsõ miatt a másodiknak valahogy igazodnia kell az elsõ által kinyújtott sormagassághoz. Eszerint lehet felül, középen és alul. A paraméter neve, amit a <td> TAG-be írunk, a valign ( valign = vertical align = függõleges igazítás). Értéke lehet, mint ahogy az elõbb is említettem: top, middle, bottom ( top = felül; middle = középen; bottom = alul). A valign alapértelmezettben middle.

<table border="1" cellpadding="10" align="center"> <tr><td>Itt nagyon sok minden van, ezért a melletem lévõ oszlopnak valahogy igazodnia kell majd az általam kimagasított sorban...</td> <td valign="middle">2. elem</td></tr> <tr><td valign="top" >3. elem</td> <td>Ebbe a cellába is egy kicsit több szöveg került, na lesz dolga az elöttem levõ cellának... </td></tr> </table>

Itt nagyon sok minden van, ezért a melletem lévõ oszlopnak valahogy igazodnia kell majd az általam kimagasított sorban... 2. elem 3. elem Ebbe a cellába is egy kicsit több szöveg került, na lesz dolga az elöttem levõ cellának...

A tábázat méretei:
Többfajta mértezésrõl beszélhetünk, mint ahogy többfajta igazításról: magáról a táblázat méretérõl, a táblázaton belüli felosztásról, stb. Azonban a paraméterek állandóak, és ugyanazok, mint a képeknél, vagyis a width és a height ( width = szélesség; height = magasság). Itt azonban nemcsak pixelekben adhatjuk meg a szélességét vagy a magasságát, hanem %-ban is. Ezzel azt érhetjük el, hogy ha például nem ugyanolyan felbontásban dolgoznak az egyes képernyõk, vagy ha az ablak mérete kisebb a teljes méretnél, akkor az adott táblázat mindig az adott területen egy rögzitett százalékát fogalalja el mint magasságban, mint szélességben. Ha nem adunk táblázatunknak méreteket, akkor csak annyira nyújtja ki amekkorára a táblázatnak szüksége van. Az alábbi mintán láthatjuk, hogy a táblázat a neki megadott hely 70%-át foglalja el szélességben, és a magassága 140 pixelnyi.

<table border="1" cellpadding="10" width="70%" height="140" align="center"> <tr><td>1. elem</td> <td>2. elem</td></tr> <tr><td >3. elem</td> <td>4. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem

Ha a táblázat elemei ugyanakkor helyet foglalnak el, akkor a HTML automatikusan egyenlõ részre osztja fel közöttük a területet, ha van elõre megadott méret, ha nincs. Abban az esetben, ha pl. az egyik cellában sokkal több adat van, akkor persze annak nagyobb területet enged. Azonban mi is megszabhatjuk a konkrét méretet, vagy felosztási arányt, persze - mint az elõbb - %-ban. Egy oszlopon vagy egy soron belül elég egyszer megadi a méretet, mert akkor az egész sort, ill. oszlopot úgy igazítja. Vigyánunk kell viszont, hogy a megadott mértékek összege ne legyen nagyobb a teljes méretnél!!!

<table border="1" cellpadding="10" width="300" height="160"> <tr><td width="200" height="70%"> 200 * 70%</td> <td width="100">100 * 70%</td></tr> <tr><td height="30%">200 * 30%</td> <td>100 * 30%</td></tr> </table>

200 * 70% 100 * 70% 200 * 30% 100 * 30%

Cellák egyesítése:
Gyakran elõfordul, hogy a táblázat néhány celláját egyesíteni szeretnénk akár vízszintesen, akár függõlegesen. Erre a colspan ill. a rowspan paramétereket kell használni ( colspan = oszlopfeszítés; rowspan = sorfeszítés). Ezek a <td> TAG-en belül használható. Ezekenek a paramétereknek alapértelmezettben 1 értéke. Amennyiben valamilyen más értéket adunk meg, akkor a cella több (általunk megadott értéknek megfelelõ számú) cella helyét foglalja el. Nézzük az alábbi példákat!

<table border="1" cellpadding="10"> <tr><td>1. elem</td> <td>2. elem</td> <td>3. elem</td> </tr> <tr><td>4. elem</td> <td colspan="2">5. - 6. elem</td></tr> </table>

1. elem 2. elem 3. elem 4. elem 5. - 6. elem

<table border="1" cellpadding="10"> <tr><td rowspan="2">1. - 4. elem</td> <td>2. elem</td> <td>3. elem</td> </tr> <tr><td>5. elem</td> <td>6. elem</td></tr> </table>

1. - 4. elem 2. elem 3. elem 5. elem 6. elem

Az elsõ példán láthatjuk, hogy a 2. sor 2. és 3. cellája egyesítve van vízszintesen. A másodikon az elsõ és második sor elsõ oszlopait egyesítettük függõlegesen. Megfigyelhetõ, hogy miután leírtuk, hogy a cella 2 cella egyesítésébõl jött létre, akkor már csak egy cellába írjuk a dolgokat, és a másik cella helyet már a következõ cellát írjuk.

Példák:   7. Táblázatok

Gyakorlatok:   7. Táblázatok