Táblázatok létrehozása, felosztása
Amennyiben oldalunkon táblázatot is el akarunk helyezni, akkor van szükségünk a <TABLE> parancsra, melynek zárópárja a </TABLE> tag. E
kettő közé kerül a táblázat valódi része. Minden sort <TR> ( Table row ) parancs vezet be, a zárópár nem kötelező. A sorok egyes celláit a <TD>
paranccsal jelezhetjük. Egy cella mindig a következő <TD> utasításig tart. A táblázat címét a <CAPTION> és a </CAPTION> tag
szegélyezi, természetesen már a <TABLE> utasításon belül. Az egyes oszlopok fejlécét a <TH> ( Table head ) paranccsal adhatjuk meg.
Néhány böngésző ismeri még a <THEAD> ( táblázat fejléce ), a <TBODY> ( táblázat törzse ) és a <TFOOT> ( táblázat lábléce )
tageket.
A táblázatok a <TABLE> tagon belül több beállítást is kaphatnak. Ezek a következők:
ALIGN="vízszintes elhelyezés" - A táblázat vízszintes elhelyezését állíthatjuk be vele. Értékei lehetnek: left, center,
right. Ez az opció gyakorlatilag minden más táblázatelemnél is használható.
VALIGN="függőleges elhelyezés" - A táblázat függőleges elhelyezkedését befolyásolja. Értékei: top, center ( egyes böngészőknél
middle ), bottom.
BORDER="vastagság" - A táblázat és a cellák szegélyének vastagságát állítja be, melyet pixelben adhatunk meg.
BORDERCOLOR="#színkód" - Az táblázatszegély színét adja meg. ( Nem minden böngésző ismeri. )
CELLPADDING="távolság" - A cellák tartalmának távolságát adja meg a szegélytől pixelben.
CELLSPACING="távolság" - Két szomszédos cella szegélyének érintkezésénél azok egymáshoz viszonyított távolságát adja meg pixelben. ( Lásd a
példát! )
BGCOLOR="#színkód" - A táblázat háttérszínét állítja be.
BACKGROUND="elérési út/képnév.kiterjesztés" - A táblázat háttereként használt kép helyét adja meg.
WIDTH="szélesség" - A táblázat széleségét határozza meg. Megadható pixelben és a böngésző ablak nagyságának százalékában.
Ezeken kívül a <TD>, a <TR> és a <TH> tag ismeri a BGCOLOR, az ALIGN és a VALIGN opciókat, melyek
működése és beállítása a fentebb leírtakkal azonos.
Gyakran szükségünk lehet cellák egyesítésére is. Ezt a <TH> és a <TD> utasítás opcióiként tehetjük meg. Parancsszavai:
COLSPAN="oszlopok száma" - Az értékben megadott számú cellát egyesíti vízszintesen.
ROWSPAN="sorok száma" - Megadott számú sort, azaz a függőlegesen szomszédos cellákat egyesíti.
<html>
<head>
<title>Táblázatok létrehozása, felosztása - Példa</title>
</head>
<body bgcolor="black" text="lightyellow" link="lightblue" vlink="lightgreen" alink="red">
<table align="center" border="2" cellpadding="10" cellspacing"2" width="90%" bgcolor="teal">
<caption>1. táblázat, ahol kicsi a CELLSPACING</caption>
<tr>
<td align="right"><b>1,1</b> -jobbra
<td><b>1,2</b>
<td align="center"><b>1,3</b> -középre
<tr>
<td bgcolor="red"><b>2,1</b> -piros
<td colspan="2"><b>2,2</b> -2 oszlopot egyesít
<tr>
<td rowspan="2"><b>3,1</b> -2 sort egyesít
<td bgcolor="green"><b>3,2</b> -zöld
<td valign="bottom"><b>3,3</b> -lentre
<tr>
<td bgcolor="blue"><br><b>4,2</b> -kék
<td valign="top"><b>4,3</b> -fentre
</table>
<br><br><br>
<table align="center" border="4" cellpadding="2" cellspacing="10" width="90%">
<caption>1. táblázat, ahol nagy a CELLSPACING</caption>
<tr>
<td align="right"><b>1,1</b> -jobbra
<td><b>1,2</b>
<td align="center"><b>1,3</b> -középre
<tr>
<td bgcolor="red"><b>2,1</b> -piros
<td colspan="2"><b>2,2</b> -2 oszlopot egyesít
<tr>
<td rowspan="2"><b>3,1</b> -2 sort egyesít
<td bgcolor="green"><b>3,2</b> -zöld
<td valign="bottom"><b>3,3</b> -lentre
<tr>
<td bgcolor="blue"><br><b>4,2</b> -kék
<td valign="top"><b>4,3</b> -fentre
</table>
<br><br><br>
<table border="2" align="center" width="85%" cellpadding="5" cellspacing="5">
<tr>
<td colspan="3" bgcolor="red">01
<td bgcolor="orange">02
<td bgcolor="orange">03
<tr>
<td rowspan="2" bgcolor="yellow">04
<td bgcolor="orange">05
<td bgcolor="orange">06
<td bgcolor="orange">07
<td rowspan="3" bgcolor="blue">08
<tr>
<td bgcolor="orange">09
<td colspan="2" rowspan="2" bgcolor="green">10
<tr>
<td bgcolor="orange">11
<td bgcolor="orange">12
<tr>
<td bgcolor="orange">13
<td colspan="4" bgcolor="brown">14
</table>
</body>
</html>