Táblázatok

Táblázat megadása
A táblázatok nagyon fontos szerepet töltenek be a HTML oldalak készítésénél, hiszen nem csak a hagyományos célokra (adatok megjelenítése, elrendezése) használjuk fel őket, hanem design okokból is.

A táblázat megadása a <table> tag használatával lehetséges. A <table> és </table> tageken belül, a <tr> elemekkel adhatjuk meg a táblázat sorait. A <td> elem a sorokon belüli cellák létrehozására szolgál. Az egyes sorok/oszlopok fejléceit a <th> tagek között adhatjuk meg, amelyek kiemelve jelennek meg.

A <table> tag paraméterei a következők lehetnek:

width: szélesség megadása képpontokban, vagy a rendelkezésre álló hely százalékában
align: a táblázat igazításának típusa (balra - left, középre - center, jobbra - right)
border: a szegély vastagsága képpontokban
cellspacing: az egyes cellák közti távolság képpontokban (cellatávolság, vagy cellaköz)
cellpadding: a cella tartalma és a cella határvonala közti távolság képpontokban (cellabélés, vagy cellamargó)

A <tr> tag paraméterei a következők lehetnek:

align: a sorban lévő cellák vízszintes igazításának típusa (balra - left, középre - center, jobbra - right)
valign: a sorban lévő cellák függőleges igazításának típusa (felülre - top, középre - middle, alulra - bottom) 

A <td> és <th> tag paraméterei:

align: a cella vízszintes igazításának típusa (balra - left, középre - center, jobbra - right)
<td> esetén a balra, <th> esetén a középre igazítás az alapértelmezett.
valign: a cella függőleges igazításának típusa (felülre - top, középre - middle, alulra - bottom)
(a fenti igazítások felülírják a <tr> tagnél megadott igazításokat)
width: cella szélességének megadása képpontokban. (A százalékos megadás nem javasolt...)
height: cella magasságának megadása képpontokban. (A százalékos megadás nem javasolt...)
rowspan: az adott cella ennyi sor magas lesz. (cellák egyesítése függőlegesen)
colspan: az adott cella ennyi oszlop széles lesz (cellák egyesítése vízszintesen)

A következő példákon keresztül megnézheted, hogy az egyes paraméterek valójában mire szolgálnak.

 
Példa a <td> tag használatára
<table align="center">
 <tr>
   <td>1. sor 1. elem</td>
   <td>1. sor 2. elem</td>
   <td>1. sor 3. elem</td>
 </tr>
 <tr>
   <td>2. sor 1. elem</td>
   <td>2. sor 2. elem</td>
   <td>2. sor 3. elem</td>
 </tr>
</table>
1. sor 1. elem 1. sor 2. elem 1. sor 3. elem
2. sor 1. elem 2. sor 2. elem 2. sor 3. elem
A könnyebb átláthatóság érdekében, jó ha az egymásba ágyazott tageket beljebb kezded, így egy hosszabb kód esetén is áttekintheted, hogy melyik elem, melyik másik elembe van beágyazva.
Példa a <th> tag használatára
<table>
<tr>
  <th>Órarend</th>
  <th>Hétfõ</th>
  <th>Kedd</th>
  <th>Szerda</th>
  <th>Csütörtök</th>
  <th>Péntek</th>
</tr>
<tr>
  <th>8:00 - 9:00</th>
  <td>Angol</td>
  <td>Matek</td>
  <td>Biológia</td>
  <td>Tesi</td>
  <td>Ének</td>
</tr>
<tr>
  <th>9:00- 10:00</th>
  <td>Töri</td>
  <td>Fizika</td>
  <td>Földrajz</td>
  <td>Informatika</td>
  <td>Matek</td>
</tr>
</table>
Órarend Hétfõ Kedd Szerda Csütörtök Péntek
8:00 - 9:00 Angol Matek Biológia Tesi Ének
9:00- 10:00 Töri Fizika Földrajz Informatika Matek

Táblázat kerettel (border), cellabéléssel (cellpading)
Border: a táblázat köré rajzolandó keret vastagsága pixelekben
Cellpadding: a cellán belül a cellatartalom és a cella széle közti távolság pixelekben
<table border=1 cellpadding=5>
 <tr>
   <td>1. sor 1. elem</td>
   <td>1. sor 2. elem</td>
   <td>1. sor 3. elem</td>
 </tr>
 <tr>
   <td>2. sor 1. elem</td>
   <td>2. sor 2. elem</td>
   <td>2. sor 3. elem</td>
 </tr>
</table>		    
1. sor 1. elem 1. sor 2. elem 1. sor 3. elem
2. sor 1. elem 2. sor 2. elem 2. sor 3. elem

Táblázat cellabéléssel, és cellatávolsággal (cellspacing)
Cellspacing: az egyes cellák közti távolság, illetve a szélső cellák és a keret közti távolság pixelekben
<table border=1 cellpadding=5 cellspacing=10>
 <tr>
   <td>1. sor 1. elem</td>
   <td>1. sor 2. elem</td>
   <td>1. sor 3. elem</td>
 </tr>
 <tr>
   <td>2. sor 1. elem</td>
   <td>2. sor 2. elem</td>
   <td>2. sor 3. elem</td>
 </tr>
</table>		    
1. sor 1. elem 1. sor 2. elem 1. sor 3. elem
2. sor 1. elem 2. sor 2. elem 2. sor 3. elem

Táblázat felirattal (caption)
A táblázat nevét a <caption> </caption> tagek között adhatod meg.
Az hogy a név a táblázat fölött, vagy alatt jelenik meg, az align=top,
illetve align=bottom paraméterrel adhatod meg.
<table border=1>
<caption align=bottom>táblázat neve </caption>
 <tr>
   <td>1. elem</td>
   <td>2. elem</td>
 </tr>
</table> 		  
táblázat neve
1. elem 2. elem

Táblázat elemeinek vízszintes igazítása
(align=left|middle|right)
Az align=left|middle|right paraméter használatával a cella tartalmát balra, középre vagy jobbra igazíthatod.
A middle helyett írhatsz center-t is.
<table border=1>
 <tr>
   <td>cellaelem</td>
   <td>cellaelem</td>
   <td>cellaelem</td>
 </tr>
 <tr>
   <td align=left>bal</td>
   <td align=middle>közép</td>
   <td align=right>jobb</td>
 </tr>
</table>		    
cellaelem cellaelem cellaelem
bal közép jobb

Táblázat elemeinek függőleges igazítása
(valign=top|middle|bottom)
A valign=top|middle|bottom paraméter használatával a cella tartalmát felülre, középre vagy alulra igazíthatod.
Alapértelmezésben a cellatartalom középre igazodik. A middle helyett némelyik böngészőprogram elfogadja a center értéket is, de ez nem felel meg a szabványnak.
<table border=1>
 <tr>
    <td>A valign=top|middle|bottom paraméter használatával a cella tartalmát felülre, középre vagy alulra igazíthatod.
Alapértelmezésben a cellatartalom középre igazodik.</td>
    <td valign=top>felül</td>
    <td valign=bottom>alul</td>
    <td valign=middle>középre</td>
</tr>
</table>
A valign=top|middle|bottom paraméter használatával a cella tartalmát felülre, középre vagy alulra igazíthatod.
Alapértelmezésben a cellatartalom középre igazodik.		 felül alul középre

Táblázat celláinak összevonása vízszintesen (colspan)
Colspan: az adott cella ennyi oszlopot fog elfoglalni
<table border=1>
<tr>
  <td>1.1.</td>
  <td>1.2.</td>
  <td>1.3.</td>
</tr>
<tr>
  <td>2.1.</td>
  <td colspan=2>2.2-3.
  </td>
</tr>
</table>
1.1. 1.2. 1.3.
2.1. 2.2-3.

Táblázat celláinak összevonása függőlegesen (rowspan)

Rowspan: az adott cella ennyi sor magasságú lesz.
<table border=1>
 <tr>
   <td rowspan=2>1.-2.1.</td>
   <td>1.2.</td>
</tr>
<tr>
   <td>2.2.</td>
</tr>
<tr>
   <td>3.1.</td>
   <td>3.2.</td>
</tr>
</table>
1.-2.1. 1.2.
2.2.
3.1. 3.2.

Táblázat szélességének megadása százalékban (width= %)
A százalékos megadás során a táblázat szélessége a rendelkezésre álló hely megadott százaléka lesz.
Tehát ha az ablak méretét megváltoztatjuk, akkor a táblázat mérete is megváltozik.
<table border=1 width=80%>
 <tr>
   <td>1.1.</td>
   <td>1.2.</td>
   <td>1.3.</td>
 </tr>
 <tr>
   <td>2.1.</td>
   <td>2.2.</td>
   <td>2.3.</td>
 </tr>
</table>		    
1.1. 1.2. 1.3.
2.1. 2.2. 2.3.

Táblázat szélességének megadása pixelben (width= )
A képpontokban történő megadásnál a táblázat mérete nem függ az ablakmérettől, minden ablakméretnél a megadott szélességű lesz.
<table border=1 width=240>
 <tr>
   <td>1.1.</td>
   <td>1.2.</td>
   <td>1.3.</td>
</tr>
<tr>
   <td>2.1.</td>
   <td>2.2.</td>
   <td>2.3.</td>
</tr>
</table>
1.1. 1.2. 1.3.
2.1. 2.2. 2.3.

Táblázat háttérszínének megadása
(bgcolor=szín|színkód)
A háttérszínt a bgcolor paraméterrel adhatod meg. pl.: bgcolor="lightgreen", vagy bgcolor="#00FFFF".
<table border="1" width="50%" bgcolor="#C43FD7">
 <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
</tr>
<tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
</tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3

Táblázathoz háttérkép rendelése
(background)

Ha nem háttérszínt, hanem háttérképet szeretnél megadni, akkor azt a background paraméterrel teheted meg.

A kép formátuma GIF, JPG vagy PNG lehet. Vigyázz, mert bizonyos feltételek mellett (átlátszóság használata) sajnos az újabb böngészők közül sem mindegyik jeleníti meg helyesen a PNG képeket.
<table border="1" width="50%" background="backg.gif">
 <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td>1.3</td>
 </tr>
 <tr>
   <td>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
 </tr>
</table>		      
1.1 1.2 1.3
2.1 2.2 2.3

Az egyes cellák hátterének megváltoztatása (bgcolor=szín|színkód)
Nem csak az egész táblázatra vonatkozóan adhatod meg a háttérszínt, hanem az egyes cellák hátterét, vagy háttérszínét is beállíthatod..
<table border="1" width="50%" bgcolor="#00FFFF">
<tr>
   <td bgcolor="#008000">1.1</td>
   <td bgcolor="#00FF00">1.2</td>
   <td bgcolor="#FFFF00">1.3</td>
</tr>
<tr>
   <td background="backg.gif">2.1</td>
   <td background="backg.gif">2.2</td>
   <td background="backg.gif">2.3</td>
</tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3

Cellákba kép helyezése (<img ...>)
Az előbbi feladatból kiindulva az első cellába helyezzünk el egy 100 pixel széles képet középre igazítva
<table border="1" width="50%" bgcolor="#00FFFF">
<tr>
   <td bgcolor="#008000" align="center"><img src="nappali.jpg" width="100"></td>
   <td bgcolor="#00FF00">1.2</td>
   <td bgcolor="#FFFF00">1.3</td>
</tr>
<tr>
   <td background="backg.gif">2.1</td>
   <td background="backg.gif">2.2</td>
   <td background="backg.gif">2.3</td>
</tr>
</table>
1.2 1.3
2.1 2.2 2.3

Az egyes cellák méretének megadása (szélesség, magasság)

A cellák szélességét szintén beállíthatod a width paraméter használatával.
A böngészőprogramok többsége megjeleníti a relatív (%-ban megadott) méretmegadási formát is, de ezt a HTML szabvány nem támogatja.

A táblázat, illetve a cella magasságát a height paraméterrel adhatod meg. 
<table border="1" width="90%" bgcolor="#C4FFD7">
<tr>
   <td width="60%">1.1</td>
   <td width="30%">1.2</td>
   <td width="10%">1.3</td>
</tr>
<tr>
   <td height=100>2.1</td>
   <td>2.2</td>
   <td>2.3</td>
</tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3
Ha valamelyik cella üres, akkor a böngésző nem jeleníti meg a cellát határoló keretet, illetve a megadott háttérszín sem érvényesül. Ha azt akarod, hogy legyen egy üres cellád, amely körül van keret, vagy legyen egy adott hátterű üres cella, akkor a <td> és </td> tagek közé helyezz el egy &nbsp; kódot.

Az &nbsp; karakter
Alapesetben ha két szó között üres hely van, akkor a böngésző a jobb helykihasználás érdekében a két szót különválaszthatja, tehát elképzelhető, hogy a két szó nem egy sorban jelenik meg. Ha ezt el szeretnénk kerülni, akkor kell az &nbsp; (non-breaking space) jelet alkalmaznunk. Ekkor a böngésző a két szót "egymáshoz ragasztja", vagyis nem fogja szétválasztani a szavakat.
ez az alap tördelés
Itt a "bizonyos szavakat" között nem egyszerű üres hely van, hanem &nbsp; kód, ezért a böngésző nem tördeli külön a szavakat.