Táblázatok

Maga a táblázat tagje igen egyszerû: -TABLE- és -/TABLE-. Ezen belül viszont sok minden lehet. Minden egyes sort -TR- és -/TR- közé kell zárni, míg minden egyes cella tartalmát -TD- és -/TD- közé.

elso_kep
Ahhoz, hogy kicsit szebbé tegyük a táblázatot, érdemes -TABLE- tagbe különbözõ paramétereket beleírni.
  • A legegyszerûbb a táblázat igazítása: -TABLE ALIGN="left"- Ez az alapeset. -/TABLE- Persze lehet középre (center), illetve jobbra (right) is igazítani.
  • A második lehetõség a keret vastagsága. -TABLE BORDER=0- Ez az alapeset. -/TABLE- A vastagság képpontokban mérendõ és egész szám lehet. Szokásos érték: 1 és 5 között.
  • A harmadik lehetõség látszólag felesleges, mivel érdemes az oszlopokat megszámolni és ezt a táblázat fejlécébe beírni. -TABLE COLS=3- 3 oszlop lesz!-/TABLE-
  • Negyedszerre érdemes figyelembe venni, hogy a táblázatot lehet (és érdemes is) színezni. -TABLE BGCOLOR="red"- Ez a hagyományos színekkel vagy kódokkal történik -/TABLE-.
  • Lehet egy kép is a háttér. Lásd: -IMG SRC="képurl"-
  • Persze nem csak a táblázat hátterét, de a kereteket is lehet színezni! -TABLE BORDERCOLOR="yellow"- Így zöld lesz a keret színe. -/TABLE-. Saját tapasztalat, hogy a színekkel mértékkel kell bánni!
  • Az egyes cellákat nem kell összezsúfolnunk, mivel a cellákat ki lehet bélelni. -TABLE CELLPADDING=2-. Ez a cellahatár és az adat távolságát mutatja meg. Alapeset a 0. -/TABLE-.
  • Persze az egyes cellákat sem kell mindig összezsúfolni, így a CELLSPACING használatával nagyobb lehet a cellahatárok közti távolság. Alapeset: 0.
  • Az egyik legfontosabb lehetõség maradt a legvégére: a táblázatnak nem kell kitöltenie az ablak egészét, hanem a -TABLE WIDTH="50%"- paraméter segítségével megadható, hogy hány százalékot töltsön ki. -/TABLE- Ha csak simán egy szám szerepel a WIDTH után, akkor százalék helyett képpont lesz az értelmezés.

A fenti paraméterek persze kombinálhatóak! A következõ táblázat például jobbra igazítva, 2-es keretvastagsággal, 2 oszloppal szürke háttérszínnel és piros keretekkel készült a böngészõablak 60%-ára. A cellák bélése 2, akárcsak a cellák közti távolság is.

masodik_kep
  • Egy táblázatnak címet is adhatunk. Ezt a -TABLE- szimbólum után kell írni.  Szabályozható, hogy hová kerüljön a cím -CAPTION ALIGN="TOP"- felülre kerül - alapértelmezés. -/CAPTION-.
  • További lehetőségek: bottom = alulra és középre, center = középre, left = balra, right = jobbra.
  • Függőleges helyzetet szabályozhatjuk a VALIGN paraméterrel. Minta: -CAPTION VALIGN="TOP"-  Alapértelmezés = A táblázat címe a táblázat fölé kerül. Másik lehetséges érték: BOTTOM = a cím alulra kerül.
  • A két paraméter persze együtt is használható!
hatodik_kep

Szükség esetén két vagy több cellát is összevonhatunk, mint ez a következõ példában látható! ( A cellafeszítés (colspan) tipikus használata látható itt:

otodik_kep
  • Minden egyes cella tartalmát darabonként is igazíthatjuk -TD ALIGN="LEFT"- Balra rendez - alapértemezés -/TD- Lehet középre (center) vagy jobbra (right) is rendezni.
  • Természetesen egyenként is lehetõségünk van a cellák szélességének állítására is az egész táblázat szélességére alkalmazott WIDTH paraméterrel.
  • Minden egyes cellához lehet rendelni egy címet is, mely akkor jelenik meg, ha az illetõ cella fölé kerül az egér. -TD TITLE="cim"- elem tartalma -/TD-.
  • Hosszú szövegeknél elõfordulhat, hogy egy sornál több is lehet 1-1 cella tartalma. Ilyenkor jól jöhet a -TD VALIGN="CENTER"- paraméter -/TD-, ahol valign = vertical align = függõleges rendezés. Lehetséges értékek: center = közép; top = fent; bottom = alul; baseline = a betûk szintjének aljához igazítja az objektumot.
  • Ennek némileg ellentmond, hogy ha semmiképpen sem akarjuk, hogy egy cellában a szöveget megtörje, akkor használhatjuk a NOWRAP=TRUE paramétert a TD tag-ben. Ekkor a cellatartalom nem kerül törésre. Alapértelmezés: NOWRAP=FALSE.
    (azaz a cellatartalom törhető.)
  • Cellánként is lehetőség nyílik háttérszín (BGCOLOR), illetve háttérgrafika (BACKGROUND) definiálására, azért csak óvatosan a díszekkel...
  • Külön lehetõségünk van -TH- táblázat fejlécének - table heat -/TH- és -TFOOT- táblázat láblécének - table foot -/TFOOT- definiálására is, bár ezt a nem-Microsoft böngészők nem tudják igazán megjeleníteni.
  • Értelemszerűen létezik a táblázatnak a törzse is. Ez a -TBODY- és a -/TBODY- közé kerülhet.
  • Ha egy táblázatot 3-dimenzós módban (többfajta keretszínnel) szeretnénk látni, akkor erre is ad lehetõséget a HTML nyelv újabb definációja, de csak a -TABLE- tagben. Ilyen lehetõség a BORDERCOLORLIGHT és a BORDERCOLORDARK, amint ez a következõ példában is látható:
negyedik_kep
Ezek után már bátran neki lehet állni táblázatok formázásának és kitöltésének!

A hozzászólás csak a regisztrált és bejelentkezett tagok számára engedélyezett!

Oldalainkat 32 vendég böngészi
Látogatóink száma: 2010.07.10 -től