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.