A HTML formátum táblázatai

A HTML formátumnak ez az utasításcsoportja képes a legváltozatosabb szöveg-, és képmegjelenítési formák előállítására. A <TABLE> és a </TABLE> utasítások közé zárt részt tekintjük egy táblázatnak.
A táblázatnak a címét a <CAPTION> és a </CAPTION> utasítások között kell megadni. (Figyelem! Az így megadott cím nem a táblázatban, hanem előtte fog megjelenni!) A cím <CAPTION ALIGN="hely"> formájú megadással igazítható.
A táblázat minden sora a <TR> utasítással kezdődik és a következő <TR>-ig, ill. a táblázat végéig tart. Egy sor tartalmazhat oszlopfejléceket és adatokat. Az oszlopfejléceket a <TH> utasítás vezeti be és választja el egymástól. A táblázat adatcellái pedig a <TR>-rel megkezdett sorban egy <TD> utasítással kezdődnek és minden cella a következő <TD>-ig - ill. a következő sor elejét jelző elemig - tart, ahol értelemszerűen új cella kezdődik. Az oszlopfejléceknek és az adatcelláknak csak a kezdőutasítása használatos - habár van lezáró utasításuk is (</TH>, </TD>) -, mert a záróutasításuk elhagyható!

A táblázat nyitóutasítása tartalmazhat a teljes táblázatra vonatkozó beállításokat: <TABLE BORDER="szám" ALIGN="hely" COLSPEC="oszlopjellemzők" UNITS="egység" NOWRAP CELLPADDING="pszám" CELLSPACING="kszám" BGCOLOR="színkód">
Ahol a BORDER opció a rácsozat szélességét határozza meg. (0 esetén nincs rácsozat.) Az ALIGN a teljes tábla elhelyezkedését határozza meg ( left, right, center lehet). A COLSPEC egy oszlop igazítását és szélességét adja meg. Egy oszlopra vonatkozóan egy betű és szám egybeírva (pl.: L12 C24 R10), melytől a következő oszlop értékeit egy köz választja el. Az UNITS a számokhoz tartozó mértékegységet jelöli ki (en, relative - oszlopszélességhez -, pixel). A NOWRAP opció a cellák szövegének tördelését tiltja le. Végül a BGCOLOR a táblázat háttérszínét határozza meg.

COLSPAN="szám":

Egyesít több egymással szomszédos cellát - víszintesen.

ROWSPAN="szám":

Egyesít több egymással alatti cellát - függőlegesen.

ALIGN="hely":

Igazítja a cellák tartalmát - víszintesen. Lehetséges értékei: left, center, right, justify, decimal

VALIGN="hely":

Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline

Az alábbi példatáblázat tartalmaz példákat igazításra, cellaegyesítésre, üres cellára, kép elhelyezésére, stb.:

            <TABLE BORDER=5 ALIGN="center">
            <CAPTION>A táblázat címe </CAPTION>
            <TR>
            <TH COLSPAN=2>Az 1.-2. oszlop közös fejléce
            <TH COLSPAN=3>A 3.-4.-5. oszlop közös fejléce
            <TH ROWSPAN=2>A 6. (2 soros) oszlop fejléce
            <TR>
            <TH>Az 1. oszlop másodrendű fejléce
            <TH COLSPAN=2>A 2.-3. oszlop másodrendű fejléce
            <TH COLSPAN=2>A 4.-5. oszlop másodrendű fejléce
            <TR>
            <TH>Az első adatsor címe
            <TD>Az első adatcella
            <TD>Adat (indexe: C3)
            <TD>Adat (indexe: D3)
            <TD>Adat (indexe: E3)
            <TD>Adat (indexe: F3)
            <TR>
            <TH>A 2. adatsor címe
            <TD>Adat (indexe: B4)
            <TD>Adat (indexe: C4)
            <TD>Adat (indexe: D4)
            <TD>Adat (indexe: E4)
            <TD>Adat (indexe: F4)
            <TR>
            <TH>Függőleges igazítások
            <TD ALIGN="center" VALIGN="bottom">Le
            <TD ALIGN="center" VALIGN="top">Fel
            <TD ALIGN="center" VALIGN="middle">Középre
            <TD>
            <TD>Adat (indexe: F5)
            <BR>Ettől a cellától balra egy üres cella,
            alatta pedig két üres cella összevonva
            <TR>
            <TH>Vízszintes igazítások:
            <TD>Alapértelmezés
            <TD ALIGN="left">Balra
            <TD ALIGN="center">Középre
            <TD ALIGN="right">Jobbra
            <TD ROWSPAN=2>
            <TR>
            <TD ALIGN="center" COLSPAN=5>
            <IMG SRC="k12.gif" ALT="Kép a cellában">
            </TABLE>

[Lapozás vissza] [Tartalomjegyzék] [Lapozás tovább]