7. Lecke: Táblázatok

iDevice ikon Célok
  • Ismerje a táblázatok szerepét a weboldalon
  • Ismerje a HTML nyelvben a táblázatok építésének elvét
  • Ismerje a táblázatok részeit és szerepüket
  • Ismerje a táblázatok formázásának eszközeit

Tartalom
  • Táblázatok szerepe
  • Táblázatok felépítésének elve
  • Táblázatok formázása stílussal


Táblázatok szerepe a weboldalon

Ahogy az előző, 6. leckében szerepelt, a táblázatokat többen használják arra, hogy az oldalon egységeket határozzanak meg, az oldalt, vagy annak valamilyen részét, felosszanak. Ez alapvetően hibás elgondolás és ma már elavultnak és kerülendőnek számít. Ahogy a 6. leckében szerepelt, az oldalfelosztás táblázattal túl bonyolult forráskódot eredményez, amiben nagy a hibalehetőség, valamint a módosítása nagyon nehéz. Illetve a táblázat szerkezetéből adódóan csak sor-oszlopos elrendezést lehet létrehozni vele. Tehát fontos, hogy a weboldalakon a táblázatokat arra használjuk, hogy adatokat táblázatban jelenítsünk meg. A táblázat celláiba bármit lehet beágyazni, szöveget, képet, akár egy másik táblázatot is.

Táblázat felépítése HTML nyelven

A táblázatok helyes használatához fontos érteni, hogy milyen elemekből épül fel. Mint minden táblázat, sorból és oszlopokból áll, amelyek metszetében vannak a cellák. A HTML nyelvben először mindig a táblázatot kell definiálni, majd azon belül a sorokat és a sorokon belül a cellákat. A táblázatot megadó tag a

<table>...</table>

a soroké a

<tr>...</tr>

és az egyszerű celláké a

<td>...</td>

továbbá létezik egy speciális, fejléc cellát megadó tag, a

<th>...</th>

melynek a böngésző alapértelmezésként kiemelt formátumot ad, félkövér és középre igazított lesz a tartalma.
Nagyon fontos, hogy a táblázat megadásakor ügyeljünk a helyes egymásba ágyazásra, valamint a tag-ek helyes lezárására!
Az jól látható, hogy nincs oszlop megadás a nyelvben. Az oszlopok automatikusan jönnek a létre az egymás alatt lévő cellákból. Így a helyes táblázathoz úgy kell megadni a cellákat, hogy minden sorba azonos számú legyen. Példaként egy két soros és három oszlopos táblázatot a következő módon adunk meg a HTML nyelvben:

<table>
<tr>
<td>1. sor 1. oszlop</td>
<td>1. sor 2. oszlop </td>
<td>1. sor 3. oszlop </td>
</tr>
<tr>
<td>2. sor 1. oszlop </td>
<td>2. sor 2. oszlop </td>
<td>2. sor 3. oszlop </td>
</tr>
</table>

11. Ábra: Táblázat

Cella összevonás
Ha egy sorban például eggyel kevesebb cella van, mint a többiben, akkor a cellák bal oldalról oszloponként helyezkedik el és a sor végén hiányozni fog az oszlopból egy cella. A sor közepéről cellát kihagyni nem lehet. Így a táblázat oszlopos elrendezésű marad. Ebből következik, hogy egy táblázatban annyi oszlop van, ahány cella van a "legszélesebb" sorban.
<table>
<tr>
<td>1. sor 1. oszlop</td>
<td>1. sor 2. oszlop </td>
<td>1. sor 3. oszlop </td>
</tr>
<tr>
<td>2. sor 1. oszlop </td>
<td>2. sor 2. oszlop </td>
</tr>
<tr>
<td>3. sor 1. oszlop </td>
</tr>
</table>

12. Ábra: Táblázat hiányzó cellákkal

A rácsos elrendezést csak sorok illetve oszlopok összevonásával lehet módosítani. Ettől természetesen megmarad a sor-oszlopos elrendezés, de a szomszédos cellákat egyben kezelhetjük, egy tartalmuk lesz. Minden cellát a tőle jobbra lévő egy vagy több cellával lehet összevonni, illetve az alatta lévő cellákkal. Igazából szemléletesebb elnevezés, hogy a cellát több sorra illetve oszlopra kiterjesztjük. Tehát az összevonást mindig egy cella tag-ében kell megadni és az jobbra illetve lefele lesz érvényben.
Az oszlopok összevonásánál azt kell megadni, hogy hány cellát vonjon össze, azaz hány oszlopra terjessze ki a cellát:
<td colspan="2">két oszlop széles cella</td>
A sorok összevonásánál hasonlóan azt kell megadni, hogy hány cellát vonjon össze lefele, azaz hány sorra terjessze ki:
<td rowspan="2">két sor magas cella</td>
Vigyázni kell, hogy az összevont cellákat beleszámítva kell a következő sorokban illetve oszlopokban megadni a cella tag-eket. Tehát ahogy az alábbi példa mutatja, ha egy 3 soros és 3 oszlopos táblázatban egy sorban (az elsőben) két cellát összevonunk (a másodikat és a harmadikat), attól abban a sorban három oszlop van, annyival kell számolni a többi sorban is. Illetve ha egy oszlopban (az elsőben) két cellát összevonunk (a második és harmadik sorban), akkor a harmadik sorban az oszlop számának meghatározásakor bele kell számolni, hogy egy cellát már fölülről "örököltünk".
<table>
<tr>
<td>1. sor 1. oszlop</td>
<td colspan="2">1. sor 2. és 3. oszlop</td>
</tr>
<tr>
<td rowspan="2">2. és 3. sor 1. oszlop </td>
<td>2. sor 2. oszlop </td>
<td>2. sor 3. oszlop </td>
</tr>
<tr>
<td>3. sor 2. oszlop </td>
<td>3. sor 3. oszlop </td>
</tr>
</table>

13. Ábra: Táblázat cellaösszevonással sor és oszlopirányban
A táblázat egyéb részei
A táblázathoz megadható egy táblázat felirat. Ez az elemhez tartozó szöveg, így azon belül is kell megadni. Pontosan a table tag után kell következnie és csak egy lehet egy táblázaton belül.
<table>
<caption>A táblázat címe</caption>
...
</table>

A következő tag-ek szerepe, hogy a táblázatot részegységekre lehessen bontani, így ezen egységek szerint lehet rájuk hivatkozni formázáskor.
Az egyik ilyen egység az oszlop. Fontos, hogy ezek nem definiálják strukturálisan az oszlopokat, csak formázáskor lehet így hivatkozni a korábban leírt módon létrehozott oszlopokra. Az oszlop tag-nek nincs lezáró párja, így önmagában kell lezárni:

<col />

Annyi oszlopot célszerű felvenni, ahány tényleges oszlop van, egyébként balról jobbra haladva értelmezi, azaz ha kevesebb col tag van, akkor az utolsó oszlopokra nem tudunk hivatkozni.
Az oszlopokat, a cellákhoz hasonlóan, ki lehet terjeszteni, de ennek csak az a szerepe, hogy egyben tudjak rájuk hivatkozni.

<col span="2" />

Az oszlopokat lehet csoportosítani, így több oszlopra is lehet egyszerre stílust megadni. Az oszlopcsoportok mindig rögtön a table vagy ha van, a caption tag után következnek.

<table>
<caption>A táblázat címe</caption>
<colgroup id="balKetto">
<col />
<col />
</colgroup>
<colgroup id="jobbKetto">
<col />
<col />
</colgroup>
...
</table>

A táblázat sorait is három régióra lehet csoportosítani: fej, törzs és láb. Ennek a szerepe ismét az, hogy ezekre a sorokra formázáskor egyszerre tudjunk hivatkozni. Továbbá ha egy táblázatnak annyi sora van, hogy nyomtatás több oldalra tördeli, akkor minden nyomtatott oldal tetejére és aljára megjeleníti a fejlécet és a láblécet. Alapvetően ezek az elemek nem hordoznak formázást, nekünk kell stílus megadásával formátumot adni nekik. A három blokkot célszerű együtt használni, de csak akkor kell kiírni, ha van olyan táblázat sor, amelyik bele tartozik a blokkba. Viszont ezeken a részeken kívüli sort ne írjunk a táblázatba, azaz minden sort soroljunk be valamelyik blokkba. A részek megadásának sorrendje mindig fej, majd láb és végül a törzs. Ez értelemszerűen közvetlenül a caption illetve colgroup (esetleg csak col) tag-ek után következik.

<table>
<caption>A táblázat címe</caption>
<colgroup>
<col />
...
</colgroup>
...
<thead>
<tr>...</tr>
...
</thead>
<tfoot>
<tr>...</tr>
...
</tfoot>
<tbody>
<tr>...</tr>
...
</tbody>
</table>

Megjegyzés
Azokat a cellákat, amelyeknek nincs tartalma, a böngésző nem jeleníti meg. Így, ha nem is akarunk semmit írni egy cellába, akkor is kell tartalmának lenni. Ekkor egy szóközt írunk bele, amihez a helyettesítő kódot használjuk.

<td> </td>

Táblázat formázása

Ahogy az előzőekből kitűnik, a táblázatok formázása a különböző táblázat elemek szerint történik. Ezek az elemek maga a táblázat, a táblázat felirata, a három része (fej, törzs, láb), a sorai, az oszlopai illetve az oszlopok csoportjai és a cellái.
A táblázat feliratához meg lehet adni, hogy alatta vagy fölötte helyezkedjen el

caption_side : top / bottom;

valamint szövegigazítással (5. lecke), hogy balra, jobbra, vagy középre kerüljön.
A táblázat keretének két módja van. Az egyik, amikor minden cellának külön kerete van (separate), ez a hagyományos HTML stílus. Valamint, amikor a cellák külön keretvonalait összevonja egy vonallá (collapse), ez az általános táblázatos keret megjelenési mód.

border-collapse: separate / collapse;

14. Ábra: A táblázat keretvonalának összevonása


Ezen kívül a táblázat többi részére: blokkok, sorok, oszlopok és cellák, megadható tulajdonságok a méret, keret, margó (külső és belső) és háttér (6. Lecke). A soroknak és a celláknak, illetve a táblázat három fő részének a tartalmára vonatkozó szövegformázások (5. Lecke) is megadhatóak. Van néhány feltétel, hogy mely tulajdonságot csak mely tag-nél, illetve milyen beállításnál lehet használni:

  • Belső margó (padding) csak a celláknak adható meg, illetve a táblázatnak (a táblázat széle és a celláinak távolsága), de csak ha szétválasztott keret van megadva (separate).
  • Külső margó (margin) csak a táblázatnak adható meg.
  • Az oszlopoknak és oszlopcsoportoknak, valamint a fej, törzs, láb blokkoknak a keretük csak akkor formázható, ha a keret össze van vonva egy vonallá (collapse).
  • Az oszlopoknak és oszlopcsoportoknak csak a keretük, hátterük, szélességük és láthatóságuk (9. Lecke) formázható.

Vigyázat, ha egy cellának szélességet adunk, akkor az az egész oszlopra vonatkozik! Ezért nagyon kell ügyelni arra, hogy ne adjunk meg egymásnak ellentmondó adatokat. Minden tulajdonságot a neki megfelelő elemhez rendeljünk, így egy oszlop szélességét oszlophoz rendeljük a stíluslapon és ne cellához!

iDevice ikon Feladat
Készítsen olyan oldalt, amely tartalmazza az aktuális órarendjét! Az órarend első sorába írja a napokat, első oszlopába az órákat, utolsó sorába az aznapi órák számát! A megfelelő cellákba írja be a kurzusokat, ahol szükséges vonja össze a cellákat! Formázza megfelelően a lábléc sort, fejlécsort és oszlopot! Emelje ki formázással azokat a cellákat, amelyek tartalmaznak szöveget! Használja a keret, háttér, belső margó és szövegformázásokat!

iDevice kérdés ikon Feleletválasztós teszt
A táblázatok szerkezetének definiálásának módszere:
  
Először a táblázatot adjuk meg, azon belül sorokat, azokon belül pedig a cellákat.
Először a táblázatot adjuk meg, azon belül sorokat és oszlopokat.
Először a táblázatot adjuk meg, azon belül oszlopokat és azokon belül a cellákat.

Melyik állítás helytelen?
  
Minden sorban annyi oszlop van, ahány cella szerepel.
A táblázat oszlopait megadó col tag-nek csak formázás szempontjából van funkciója.
A táblázatnak annyi oszlopa van, ahány cella van a legtöbb cellás sorban (összevonások nélkül).

Hogyan működik a cellaösszevonás?
  
Az első cellában definiálva lehet megadni, hogy mennyi sorra vagy oszlopra terjesztjük ki.
Az összevonandó cellákban adjuk meg, hogy melyiket melyikkel vonjuk össze.
Minden sor tr tag-ében megadjuk, hogy mely cellákat vonjuk össze az adott sorban.

Melyik állítás helytelen?
  
Az oszlopok szélességét meg lehet határozni a táblázat teljes szélességének az oszlopokra való szétosztási arányának megadásával.
Az oszlopok szélességét meg lehet határozni akármelyik cellájának szélességének megadásával.
Az oszlopok szélességét meg lehet határozni a col tag szélességének megadásával.

A táblázat részei és megadásának sorrendje:
  
thead, tfoot, tbody
table, td, th
table, tbody, tfoot