06. Táblázatok használata (1.rész)

A táblázatok fontos szerepet töltenek be az XHTML 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 sokszor arculattervezési okokból is, amikor például egy képet (egy honlap látványtervét) számos részre feldarabolunk, és a darabokat táblázatban helyezzük el. Bár manapság már egyre inkább kerülik a táblázatok használatát az oldalak felépítésénél (helyette mamár a <div> tagek használata az elfogadott), de ne szaladjunk ennyire előre.

A táblázat megadása <table><tr><td><th>

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.

Példa egy egyszerű táblázatra

Kód	Eredmény
<table>   <tr>     <th>Név</th>     <th>Osztály</th>   </tr>   <tr>     <td>Kiss Réka</td>     <td>10/C</td>   </tr>   <tr>     <td>Nagy Edina</td>     <td>9/A</td>   </tr> </table>	Név Osztály Kiss Réka 10/C Nagy Edina 9/A

<table> tag paraméterei

Paraméter	Érték	Leírás
width	érték [képpont] érték [%]	A táblázat szélességének megadása képpontokban, vagy a rendelkezésre álló hely százalékában. Példa: <table width="450"> <table width="75%">
align	left | center | right	A táblázat igazítását állíthatjuk be. left: balra center: középre right: jobbra
CSS alternatíva margin-left margin-right	Balra igazítás: margin-left: 0; margin-right: auto; Jobbra igazítás: margin-left: auto; margin-right: 0; Középre igazítás: margin-left: auto; margin-right: auto;	Az igazítást a bal és jobb oldali margók beállításával oldhatjuk meg (a szabványt követő böngészőkben). Internet explorer 6.0-ban ez sajnos nem vezet eredményre, így sajnos trükköznünk kell. Balra igazítás: <table style= "float:left;"> ... </table> Jobbra igazítás: <table style= "float:right;"> ... </table> Középre igazítás: <div style="text-align:center"> <table style="margin:0 auto; text-align:left;" width="32%"> ... </table> </div>
border	érték [képpont]	A szegély vastagságát adhatjuk meg képpontokban.
cellspacing	érték [képpont]	az egyes cellák közti távolság képpontokban (cellaköz)
cellpadding	érték [képpont]	a cella tartalma és a szegélye közti távolság képpontokban (cellabélés)
summary	szöveg	összefoglalás, amely a nem vizuális böngészőprogramot használók (vakok) számára nagyon fontos
bgcolor	szín | színkód	A táblázat háttérszínének beállítására szolgál.
CSS alternatíva background-color	szín | színkód	Az elem háttérszínét állíthatjuk be a segítségével.
title	szöveg	További információt helyezhetünk el a táblázattal kapcsolatban. Ez a szöveg általában buboréksúgóként (tool tip) jelenik meg a grafikus böngészőprogramokban.

Az alábbi, módosítható példában egy táblázatot láthatsz szegéllyel, cellabéléssel és cellaközzel. Változtasd meg a különböző értékeket és nézd meg az eredményt.

Lap tetejére

A táblázat felirata <caption>

A táblázatunk felett/alatt feliratot is elhelyezhetünk. A feliratot a <table> tag után közvetlenül a <caption> és </caption> tagek között kell elhelyeznünk. Egy táblázathoz csak egy ilyen felirat tartozhat.

A <caption> tag fontosabb paraméterei

Paraméter	Érték	Leírás
align	top | bottom | left | right	A felirat igazítását állíthatjuk be. top: táblázat felett bottom: táblázat alatt left: táblázat mellett balra right: táblázat mellett jobbra Megjegyzés: 6.0: a felirat balra és jobbra igazítása azt jelenti, hogy a szöveg bal, vagy jobb oldalra igazodik, de nem kerül a táblázat mellé.
CSS alternatíva caption-side	top | bottom | left | right	A felirat igazítása stíluslappal is történhet, de kérdéses, hogy a különböző böngészőprogramok milyen mértékben támogatják ezt a megadási módot.

Az alábbi, módosítható példában már felirata, és háttérszíne is van a táblázatnak.

Lap tetejére

A táblázatsor <tr>

A <tr> és </tr> tagek között adhatjuk meg az egy sorba tartozó cellákat.

A <tr> tag fontosabb paraméterei

Paraméter	Érték	Leírás
align	top | bottom | left | right	A táblázatsor cellatartalmainak vízszintes igazítására szolgál. left: balra (ez az alapértelmezett) center:középre right: jobbra justify: sorkizárt
valign	top | middle | bottom | baseline	A táblázatsor cellatartalmainak függőleges igazítására szolgál. top: cella tetejéhez middle: középre bottom: cella aljához baseline: a táblázatsor cellatartalmai közös alapvonalra lesznek igazítva.

Az alábbi példában láthatod a különböző igazítások eredményét.

A példát megnézve nem igazán szembe tűnő, hogy mi a különbség a top (felülre történő) és baseline (alapvonal) igazítás között. Jobban láthatjuk a különbséget, ha egy picit játszunk a betűméretekkel.

Az alábbiakban erre mutatunk egy példát.

Lap tetejére

A táblázatcella <td><th>

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

Paraméter	Érték	Leírás
align	left | center | right | justify	A cella tartalmának vízszintes igazítására szolgál. left: balra (<td> esetén ez az alapértelmezett) center: középre (<th> esetén ez az alapértelmezett) right: jobbra justify: sorkizárt
valign	top | middle | bottom | baseline	A táblázatsor cellatartalmainak függőleges igazítására szolgál. top: cella tetejéhez middle: középre bottom: cella aljához baseline: a táblázatsor cellatartalmai közös alapvonalra lesznek igazítva.
width	méret [képpont | %]	A cella szélességének megadására szolgál.
CSS alternatíva width	méret [képpont | %]	Az elem szélességének megadására szolgál.
height	méret [képpont | %]	A cella magasságának megadására szolgál.
CSS alternatíva height	méret [képpont | %]	Az elem magasságának megadására szolgál.
rowspan	sorok száma	A cellák vízszintes összevonásárára szolgál.
colspan	oszlopok száma	A cellák függőleges összevonásárára szolgál.

Példa a cella vízszintes igazítására

Kód	Eredmény
<table border="1" style="width: 250px">   <tr>     <td align="left">bal</td>     <td align="center">közép</td>     <td align="right">jobb</td>   </tr> </table>	balra középre jobbra

Példa a cella függőleges igazítására

Kód	Eredmény
<table border="1" style="height: 250px; width:300px">   <tr>     <td valign="top">felülre</td>     <td valign="middle">középre</td>     <td valign="bottom">alulra</td> </tr> </table>	felülre középre alulra

Példa a cellák méretének megadására

Kód	Eredmény
<table border="1">   <tr>     <td style="width:50px; height:100px;">50 x 100</td>     <td style="width:100px;">100 x 100</td>     <td style="width:30px;">30 x 100</td>   </tr>   <tr>     <td style="height:60px;">50 x 60</td>     <td>100 x 60</td>     <td>30 x 60</td>   </tr> </table>	50 x 100 100 x 100 30 x 100 50 x 60 100 x 60 30 x 60

Lap tetejére

Cellák összevonása

Arra is szükségünk lehet, hogy a szomszédos cellákat vízszintesen, vagy függőlegesen (vagy mindkét módon) összevonjuk. A vízszintes összevonáshoz a colspan, a függőlegeshez a rowspan paramétert kell használnunk. Ezt egyaránt alkalmazhatjuk a <td> és <th> tagekre is. Ha összevontunk cellákat, akkor a táblázatban már csak azokat a cellákat kell szerepeltetni, amelyeket nem érintett az összevonás.

Példa a cellák vízszintes összevonására

Kód	<table border="1" cellpadding="0" cellspacing="0" width="150">   <tr>     <th colspan="2">Név</th>     <th colspan="2">Telefonszám</th>   </tr>   <tr>     <td>Vezetéknév</td>     <td>Keresztnév</td>     <td>Körzetszám</td>     <td>Kapcsolási szám</td>   </tr>   <tr>     <td>Kovács</td>     <td>Viktor</td>     <td>45</td>     <td>555465</td>  </tr> </table>
Eredmény	Név Telefonszám Vezetéknév Keresztnév Körzetszám Kapcsolási szám Kovács Viktor 45 555465

Magyarázat

Az első sorban a colspan="2" paraméterrel állítottuk be, hogy két cellát össze kívánunk vonni. Emiatt a táblázat első sorában mindössze két <th> taget kell szerepeltetnünk.

Példa a cellák vízszintes és függőleges összevonására (4x3-as táblázatból kiindulva)

Kód

<table border="1" cellpadding="0" cellspacing="0" style="width:300px; height:200px; text-align:center; background-color:#D9E6FF">   <tr>     <td colspan="2" rowspan="2">Iroda 1</td>     <td rowspan="3" style="width: 15px; background-color: #EAE8F2">&nbsp;</td>     <td>Iroda 2</td>   </tr>   <tr>     <td>Iroda3</td>   </tr>   <tr>     <td style="background-color: #FFFFE6">Raktár 1</td>     <td style="background-color: #FFFFE6">Raktár 2</td>     <td style="background-color: #FFFFFF">WC</td>   </tr> </table>

Eredmény

Iroda 1   Iroda 2 Iroda3 Raktár 1 Raktár 2 WC

Magyarázat

Az első sorban a colspan="2" paraméterrel állítottuk be, hogy két cellát össze kívánunk vonni. Emiatt a táblázat első sorában mindössze két <th> taget kell szerepeltetnünk.

Lap tetejére