Táblázatok beszúrása

Táblázatok beszúrása HTML dokumentumba, 1. felvonás

Amikor táblázatról beszélünk, legtöbbünknek egy Excel táblázat jut eszünkben, amely sorokból, oszlopokból, továbbá az ezekből alkotott cellákból áll. A HTML táblázatai nem pontosan ilyenek. Ami közös bennük, hogy bizonyos információk tárolására szolgálnak, ahogyan az Excelben, a HTML-ben is tehetünk a cellákba szöveget, számot, képet, vagy bármilyen objektumot. Ezek az objektumok egymástól függetlenek, mivel mindegyik különálló cellákban található. A cellák összevonhatók mind vízszintesen, mind függőlegesen. Léteznek oszlopfejlécek, amelyek az alattuk levő adatok címsorát jelentik. Ha egy oszlopot szélesítek, vagy szűkítek, a teljes oszlopra vonatkozik a beállításom, nem csak az adott cellára. Ugyanez vonatkozik a sorok magasságára is. Minden cellának van saját margója, hogy ne a cellát határoló vonalakra írjunk rá, tehát ugyanúgy viselkedik, mint egy önálló lap lap. Lássuk, hogyan néz ez ki a gyakorlatban:
Elnézést a színes-szinkronizált-szélesvásznú táblázatért, de talán ez mutatja meg legjobban, a táblázatok tulajdonságait. Most foglaljuk össze az eddig látottakat a szokásos attribútumleírás táblázatban.
<TABLE> attribútumleírás

border | A táblázat keretének vastagságát adhatod meg vele. Ha nullát adsz, akkor a keret eltűnik!
background | Akár a <BODY> tag-nél, háttérképet adhatsz meg, csak itt a táblázatodnak, esetleg egyes celláknak.
bgcolor | A teljes táblázat, vagy egyes cellák háttérszínének megadása.
align | A teljes táblázat igazítása, lehetséges értékei a left, right és a center, azaz bal, jobb, közép.
width | A teljes táblázat szélességét adhatod meg pontokban, esetleg százalékban. A százalékos érték a böngészőterület megadott százalékát jelenti, tehát egy 100%-es méret a teljes, rendelkezésre álló szélességet hozzárendeli a táblázathoz.
height | A teljes táblázat magasságát adhatod meg pontokban és százalékban.

Biztosan észrevetted, hogy nem beszéltem a cellákon belüli igazításról. Igazából magukról a cellákról sem, a fenti 4 attribútum elsősorban (itt) a táblázatra vonatkozik. Ha látrehozunk egy táblázatot a <TABLE></TABLE> tag-ek segítségével, meglepődve láthatod, hogy bizony üres lesz a lapod. Még akkor is, ha szépen megadot a háttérszínt és a rácsok vastagságát, pl. így: <TABLE border="1" bgcolor="#ffff80" width="600" height="300"></TABLE>
Ez pedig egy 1-es keretvastagságú, középsárga hátterű, 600x300-as táblázatot hoz létre. De nem! Hasonló dologgal majd még többször találkozunk, úgyhogy próbáljuk megérteni a következőket: a létrehozott táblázat úgy viselkedik, mint egy üres objektum. Még nincsenek elemei. Ahhoz, hogy lássunk valamit belőle, legalább egy elemet meg kell határozni. A táblázat sorokból és oszlopokból áll, tehát ha látnánk valamit a táblázatból úgy, hogy még egyetlen sorunk és oszlopunk sem lenne, akkor ellentmondásba ütköznénk: a látható terület bekeretezve minimum egy sor és egy oszlop tartalommal már rendelkezne. Tehát most még semmit sem láthatunk. Akkor hozzunk létre sorokat és oszlopokat! Mindenekelőtt tervezzük meg a létrehozni kívánt táblázatot. Hány sora és hány oszlopa lesz? Ahogy a fenti táblázatot látjuk, ez egy 4 soros és soronként 3-3 oszlopos táblázat lesz. Soronként kell létrehozni, majd azon belül oszloponként.
A sorokat a TABLE ROW paranccsal hozzuk létre, HTML-ben ez a <TR> rövidítésnek felel meg. Ezzel megint csak semmit nem látunk, hiszen először a létrehozott sort oszlopokra kell bontsuk, ettől alakulnak ki a cellák. Az oszlopokat TABLE DATA-nak nevezzük, biztosan rájöttél az előzőekből, hogy ez a <TD> tag lesz. Mindkét tag-et érdemes lezárni (bár nem kötelező!), hogy lássuk, hol kezdődik és végződik egy cella:

    <TABLE border="1" bgcolor="#ffff80" width="600" height="300">
       <TR>
          <TD>A cella tartalma</TD>
       <TR>
    </TABLE>

Ezzel létrehoztunk egy 1 soros és 1 oszlopos táblázatot, szép sárga háttérrel, 1-es kerettel. Hogyan szúrok be több sort, vagy több oszlopot. Egyszerűen: több <TD>...</TD> és <TR>...</TR> struktúrát hozunk létre. Ne húzzuk tovább az időt, nézzük meg, vannak-e attribútumai a cella kreáló tag-eknek! Igen, vannak:
<TR> és <TD> attribútumleírás

background | A teljes sor, vagy az aktuális cella háttérképét határozhatod meg. Ha a kép nagyobb, mint a cella, akkor bizony a többi információt levágja. A kép mindig a bal felső sarokban kezdődik.
bgcolor | A teljes sor, vagy az aktuális cella háttérszínének megadása.
align | Az aktuális cella tartalmaának igazítása, lehetséges értékei a left, right és a center, azaz bal, jobb, közép.
valign | Az aktuális cella függőleges igazítása, lehetséges értékei a top, bottom és a middle, azaz fent, lent, középen.
width | Az oszlop szélességét adhatod meg pontokban, esetleg százalékban. A százalékos érték a táblázat sorának megadott százalékát jelenti, tehát egy 100%-es méret a teljes, még rendelkezésre álló oszlopszélességet hozzárendeli az aktuális oszlophoz. Figyeljünk arra, hogy a HTML bizonyos esetekben felülbírálja döntésünket, a tartalmat előtérbe helyezi a méretezéssel szemben. (Pl. nem lehet 0% egy oszlop, ha van benne tartalom!)
height | A sor magasságát adhatod meg pontokban és százalékban. Ha nem adunk meg szélesség és magasság attribútumokat, akkor a HTML a tartalomnak megfelelően állítja be ezeket.
NOWRAP | Az egyik leghasznosabb, mégis igen ritkán használt attribútum. Segítségével megakadályozhatjuk, hogy a cellába beírt szöveget a kliens automatikusan megtörje (több sorba írja). Ez főleg akkor szokott előfordulni, ha a képernyő alacsony felbontásban működik és kicsi a böngészőfelület. Ilyenkor lép működésbe az automatikus sortörés, hogy a megadott szélességértékeket tudja tartani a HTML oldal. A NOWRAP-nak nincs semmilyen értéke, tehát nincs jobb oldala, ebből következőleg pedig nincs egyenlőségjel sem. Csak akkor használjuk, ha a szélességeket nem akarjuk pontosan beállítani, mert ilyenkor a kliens olyan szélesre méretezi az oszlopokat, hogy beleférjen a tartalom egy sorba!

Végül lássuk, hogyan működik a gyakorlatban. Mit érdemes megfigyelned? Csak egy 3x3-as táblarészt készítettem el, a fejlécsort majd a következő tananyagrészben tárgyaljuk. Figyeld meg azt is, hogy csak az első sor <TD>-inek adtam szélességet, hiszen nem a cella, hanem az egész oszlop szélsességét meghatároztam ezzel az egy attribútum leírással. Ennek megfelelően az egyes sorok függőleges igazítását csak a <TR> tag-eknél adtam meg, minden egyes celláknál ezt fölösleges beállítani, hiszen így is az egész sorra vonatkozik. Kattints a nagyítóra, hogy lásd az eredményt. Íme a forrás:
[HTML]××[TITLE]Táblázatok készítése, 1. felvonás[/TITLE]××[HEAD]×¤[META http-equiv="CONTENT-TYPE" content="text/html; charset=ISO-8859-2"]×[/HEAD]××[BODY bgcolor="#c0c0c0"]××¤[H1]A példatáblázat egy részének elkészítése[/H1]××¤[TABLE border="1" background="images/bg.png" width="600" height="300" align="center"]××¤¤[TR valign="top"]×¤¤¤[TD align="left" width="20%"]bal felső[/TD]×¤¤¤[TD align="center" width="60%"]közép fent[/TD]×¤¤¤[TD align="right" width="20%"]jobbra fent[/TD]×¤¤[/TR]××¤¤[TR valign="middle"]×¤¤¤[TD align="left"]bal közép[/TD]×¤¤¤[TD align="center" bgcolor="#ffff80" NOWRAP]közép-közép, más háttérszínnel[/TD]×¤¤¤[TD align="right"]jobb közép[/TD]××¤¤[TR valign="bottom"]×¤¤¤[TD align="left"]balra lent[/TD]×¤¤¤[TD align="center"]közép lent[/TD]×¤¤¤[TD align="right"]jobbra lent[/TD]×¤¤[/TR]××¤[/TABLE]××[/BODY]××[/HTML]
A következőkben továbbfejlesztjük ismereteinket a táblázatok témakörében, jobban beleássuk magunkat a témába.