HTML alapok

Táblázatok

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" 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 CELLPADDING a cellékon belüli margót, a CELLSPACING a cellék közötti teret adja meg pixelben. Végül a BGCOLOR a táblázat háttérszínét határozza meg.

A táblázat oszlopfejlécei nem csak a legfelsõ oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is).

Mind az oszlopfejlécekben, mind az adatcellákban használhatók a következõ formázásra való opciók:

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="skala.gif" ALT="Kép a cellában">
	</TABLE>