Miután megismertük a táblázat definiálására alkalmas HTML elemeket, nézzük meg, hogyan lehet a táblázat megjelenését befolyásolni. Erre a HTML nyelv is kínál eszközöket, de jóval több formázási lehetőséget biztosít a CSS2 szabvány.
A stíluslap szempontjából a táblázat egy doboz, amely belső dobozokat tartalmaz a sorok, oszlopok, illetve cellák számára. Ebből már néhány formázási lehetőség következik, de vannak olyanok is, amelyek ilyen egyszerűen még nem határozhatók meg. Ez alapján tehát a táblázatok – mivel vagy blokk-szintű dobozba, vagy helyettesített tartalmú sorbeli dobozba kerülnek – rendelkeznek margóval, kerettel, belső margóval és tartalommal.
Ennek megfelelően a TABLE elem egy anonymous
dobozt hoz létre, amely
tartalmazza magát a táblázatot tartalmazó dobozt, valamint a táblázat címét
tartalmazó dobozt, amennyiben ez utóbbi létezik. Mindkét doboz saját margóval,
kerettel, belső margóval és tartalommal rendelkezik. Az anonymous doboz méretei
a lehető legkisebbek, amelybe belefér a táblázat és a cím doboza. A táblázat és
a cím doboza közti margók egyesülnek, ha a két doboz egymás fölött található. A
táblázat mozgatása az egész tartalmazó dobozt, így benne a cím dobozát is
mozgatja.
A cím elhelyezkedhet a táblázathoz képest mind a négy oldalon, bár
alapértelmezésként felette jelenik meg. Ha másutt szeretnénk megjeleníteni,
akkor a caption-side
tulajdonsággal tehető át máshova.
A cím dobozának szélessége alsó vagy felső elhelyezés esetén megegyezik a
táblázat szélességével. Oldalsó elhelyezésnél más a helyzet természetesen. Ez
persze csak addig igaz, amíg a doboz szélességét nem állítjuk be egy
meghatározott értékre a width
tulajdonság segítségével.
A dobozon belüli elhelyezkedése a cím szövegének a szokásos módon állítható
be, azaz vízszintesen a
text-align tulajdonsággal,
függőlegesen pedig a
vertical-align
tulajdonsággal.
Példaként állítsuk be a címet alulra, a táblázatéval egyező szélességre, balra igazított megjelenéssel:
Ezt azért érdemes ismerni, mert befolyásolhatja a megjelenő háttérszíneket. A többi elemhez hasonlóan a táblázat belső elemei is téglalap alakú dobozokat hoznak létre, tartalommal, belső margóval és kerettel. Margójuk azonban nincs.
Tulajdonképpen a dolgot úgy is elképzelhetjük, hogy a sorok és oszlopok meghatároznak egy rácsot, és minden doboz ezekre a rácsokra kerül ráfeszítésre. A sor, az oszlop csoportja vagy a cella egyaránt. Mindez számunkra azért lesz csupán fontos, hogy megállapíthassuk, hol minek a háttérszíne fog látszani.
Az alábbi kép – a szabványból kimásolva – az egyes csoportok és cellák egymásra kerülő rétegeit mutatja. Mindenhol azt a színt látjuk, amely odáig eljut, mert nincs fölötte más beállított szín: vagy nincs fölötte semmi, vagy ami fölötte van, az átlátszó.
Bármelyik réteg bármelyik dobozának háttérszíne a
background tulajdonságokkal
állítható, akár átlatszóvá is tehető, amely esetben a mögötte levő színek
látszanak majd. Az üres cellák minden esetben átlátszóak.
A következő példánk szemlélteti a rétegeket. Első sorában négy cella található, de a második sor nem tartalmaz cellákat, így ott a táblázat háttere látszik, kivéve ott, ahová az első sor cellái lelógnak.
A táblázat megjelenítésére a CSS2 szabvány kétféle algoritmust határoz meg,
amelyek egyikét minden böngészőnek ismernie kell. A jobb böngészők mindkettőt
ismerik, amely esetben köztük való választást tesz lehetővé a
table-layout
tulajdonság.
Mivel dobozokról van szó, mind a táblázat egészére, mind a celláira nézve
használható a width illetva a
height tulajdonság a szélesség
illetve a magasság meghatározására. Amennyiben például a táblázat magasságát
pontosan meghatározzuk, akkor a táblázatnak szükség esetén a sora széthúzásra
vagy összenyomásra kerülnek, hogy a megadott magasság előálljon. Ha a
tulajdonság értékét nem állítjuk be, akkor automatikusan a sorok magassága által
meghatározott magasságú lesz a táblázat.
Amennyiben valamely okból a cella magassága nagyobb, mint a cellatartalom
magassága, akkor felmerül a kérdés, hogy hova kerüljön a tartalom. Ennek
beállítására alkalmas a
vertical-align
tulajdonság.
A cella tartalmának vízszintes igazítása a
text-align tulajdonsággal
állítható be.
A visibility tulajdonság
értékének collapse-ra állításával egész sort vagy oszlopot, illetve
ezek csoportját eltüntethetjük. Ennek értelme a szkriptek használatával
együtt van: dinamikusan eltüntethető vagy megjkeleníthető a sor vagy az oszlop
anélkül, hogy a táblázatot újra kellene rajzolni.
Első lehetőségünk ezek beállítására a
TABLE elem
frame paramétere. A paraméter
ismertetésénél felsorolt értékek mindegyike meghatároz egy-egy sémát, hogy hol
jelenjen meg és hol ne jelenjen meg keret. Hasonló módon használható a
megjelenítendő belső elválasztó vonalak megadására a
rules paraméter. Ezenkívül
használható még a border
paraméter, amellyel le lehet tiltani (0 érték) a külső keretet, vagy be lehet
állítani annak szélességét pixelben.
A CSS szabvány a keretezésre két különböző szabványt határoz meg. Az egyikben minden cella önálló kerettel rendelkezik, és a szomszédos cellák keretei között hézag található. Ezzel szemben a másikban egyszerű rácsozás látható a cellák között. A kétféle keretezési modellben a cellák kereteire vonatkozó tulajdonságok mást és mást jelentenek.
Az említett két modell közti váltást a
border-collapse
tulajdonsággal lehet megtenni. Az elsőként említett, önálló keretes modell
beállításához a separate értéket kell adni, míg ha nem adunk meg
értéket, vagy a collapse értéket kapja a tulajdonság, akkor a
második modell lesz érvényben.
Ebben az esetben megadható a szomszédos cellák keretei közötti távolság a
border-spacing
tulajdonság segítségével. Ebben a modellben a sor- illetve oszlopcsoportok,
valamint a sorok nem foglalhatók egységes keretbe. Az alábbi példa mutatja a
táblázat kinézetét ebben az esetben:
Természetesen az is befolyásolható, hogy az üres cellákkal mi történjen. Erre
a empty-cells tulajdonság
alkalmas.
A másik választási lehetőség – alapértelmezésként –, amikor a szomszédos cellák kerete egybeesik.
Ekkor azonban felmerül a kérdés, hogy ha a két szomszédos cellánál eltérő a keret beállítása, akkor melyik beállítás legyen érvényes. Erre az esetre vonatkoznak az alábbi szabályok:
border-style értéke
hidden, minden egyéb érték fölötti procedenciájú: nem jelenik meg.
none érték a legalacsonyabb prioritású, azaz ha bármely más
elemnél, amely erre a keretre vonatkozik, ettől eltérő érték van beállítva,
akkor az elnyomja ezt az értéket: lesz keret.
double, solid, dashed,
dotted, ridge, outset,
groove és végül legvégső esetben inset.
Az átfedő cellák esetében – tehát amikor egy cellá átlóg egy másik cella helyére – azt kell figyelembe venni a formázásnál, hogy az átfedő cella azon cellahelyeket lefedő dobozzal rendelkezik, amely cellahelyekbe benyúlik. A keretek, a háttérszín mind ettől függ.
Mint már korábban említettük, azok a cellák, amelyek több cella helyét foglalják el, a többi cellát jobbra tolják. Ennek megfelelően kell figyelembe venni, hogy hova mennyi cellát teszünk a sorokban. Mindezt egy példával szemléltetjük: