7. fejezet: Táblázatok

Nos, elértük a HTML nyelv egyik legjobban megjeleníthető objektumát: a táblázatokat. Maga a táblázat tagje igen egyszerű: <TABLE> és </TABLE>. Ezen belül viszont sok minden lehet. Minden egyes sort <TR> és </TR> közé kell zárni (TR = table row = táblázat sora), míg minden egyes cella tartalmát <TD> és </TD> közé (TD = table data = táblázat adata). Ha semmi különös bonyolítást nem szeretnénk, akkor már el is készíthetjük az első táblázatot! (htmlpelda18.html)

<HTML>

<table>

<tr>

<td>1. sor 1. cella</td>

<td>1. sor 2. cella</td>

</tr>

<tr>

<td>2. sor 1. cella</td>

<td>2. sor 2. cella</td>

</tr>

<tr>

<td>3. sor 1. cella</td>

<td>3. sor 2. cella</td>

</tr>

</table>

</HTML>

És az eredménye:

 

 

 

 

Azért ez még túl egyszerű, így persze lehet (és kell is) bonyolítani.
-    A legegyszerűbb a táblázat igazítása: <TABLE ALIGN="left"> Ez az alapeset. </TABLE> Persze lehet középre (center), illetve jobbra (right) is igazítani.
-    A második lehetőség a keret vastagsága. <TABLE BORDER=0> Ez az alapeset. </TABLE> A vastagság képpontokban mérendő és egész szám lehet. Szokásos érték: 1 és 5 között.
-    A harmadik lehetőség látszólag felesleges, mivel érdemes az oszlopokat megszámolni és ezt a táblázat fejlécébe beírni. <TABLE COLS=3> 3 oszlop lesz!</TABLE>
-    Negyedszerre érdemes figyelembe venni, hogy a táblázatot lehet (és érdemes is) színezni. <TABLE BGCOLOR="red"> Ez a hagyományos színekkel vagy kódokkal történik </TABLE>.
-    Lehet egy kép is a háttér. Lásd: <IMG SRC="képurl">
-    Persze nem csak a táblázat hátterét, de a kereteket is lehet színezni! <TABLE BORDERCOLOR="yellow"> Így zöld lesz a keret színe. </TABLE>. Megjegyzés: Saját tapasztalat, hogy a színekkel mértékkel kell bánni!
-    Az egyes cellákat nem kell összezsúfolnunk, mivel a cellákat ki lehet bélelni. <TABLE CELLPADDING=2>. Ez a cellahatár és az adat távolságát mutatja meg. Alapeset a 0.
-    Persze az egyes cellákat sem kell mindig összezsúfolni, így a CELLSPACING használatával nagyobb lehet a cellahatárok közti távolság. Alapeset: 0.
-    Az egyik legfontosabb lehetőség maradt a legvégére: a táblázatnak nem kell kitöltenie az ablak egészét, hanem a <TABLE WIDTH="50%"> paraméter segítségével megadható, hogy hány százalékot töltsön ki. </TABLE> Ha csak simán egy szám szerepel a WIDTH után, akkor százalék helyett képpont lesz az értelmezés.

Néhány fontosabb paraméter jöjjön a jobb áttekinthetőség kedvéért egy táblázatban:

Paraméter angolul

Paraméter magyarul

Lehetséges értékek

align

igazítás

left/right/center

border

keret vastagsága

képpont vagy egyéb távolságegység

cols

oszlopok száma

1, 2, 3, …

bgcolor

háttérszín

valamilyen szín vagy RGB-kód

bordercolor

keret színe

valamilyen szín vagy RGB-kód

cellpadding

cellán belüli távolság a kerettől

0, 1, 2, 3, …

cellspacing

cellák közti távolság

képpont vagy egyéb távolságegység

width

szélesség

képpont, % vagy egyéb távolságegység

 

A fenti paraméterek persze kombinálhatóak! A következő táblázat például jobbra igazítva, 2-es keretvastagsággal, 2 oszloppal szürke háttérszínnel és piros keretekkel készült a böngészőablak 60%-ára. A cellák bélése 2, akárcsak a cellák közti távolság is. (htmlpelda19.html)

<html>
<table ALIGN=RIGHT BORDER=2 CELLSPACING=2 CELLPADDING=2
COLS=3 WIDTH="60%" BGCOLOR="#FFFF00" BORDERCOLOR="red">
<tr>
<td><b>Param&eacute;ter angolul</b></td>
<td><b>Magyarul</b></td>
<td><b>Lehets&eacute;ges &eacute;rt&eacute;kek</b></td>
</tr>
<tr>
<td>ALIGN</td>
<td>igaz&iacute;t&aacute;s</td>
<td>left/right/center</td>
</tr>
<tr>
<td>BORDER</td>
<td>keretvastags&aacute;g</td>
<td>0, 1, 2, 3, ...</td>
</tr>
<tr>
<td>COLS</td>
<td>oszlopok sz&aacute;ma</td>
<td>1, 2, 3, 4, ...</td>
</tr>
<tr>
<td>BACKGROUND</td>
<td>h&aacute;tt&eacute;rsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja, esetleg k&eacute;p URL-je</td>
</tr>
<tr>
<td>BORDERCOLOR</td>
<td>keretsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja</td>
</tr>
<tr>
<td>WIDTH</td>
<td>t&aacute;bl&aacute;zat sz&eacute;less&eacute;ge</td>
<td>pixelsz&aacute;m vagy %</td>
</tr>
</table>
</html>

13. feladat: Készítsen a legnépszerűbb magyar hírportálokról egy táblázatot, benne a portálok nevével és URL-címével.

További lehetőségek


•    Egy táblázatnak címet is adhatunk. Ezt a <TABLE> szimbólum után kell írni a következő minta szerint: (htmlpelda20.html) Szabályozható, hogy hová kerüljön a cím <CAPTION ALIGN="TOP"> felülre kerül - alapértelmezés. </CAPTION>. További lehetőségek: bottom = alulra és középre, center = középre, left = balra, right = jobbra.

<HTML>

<table border="2">

<caption> Ez a cím </caption>

<tr><td> Ez a táblázat eleme</td></tr>

</table>

</HTML>

 

 

•    Függőleges helyzetet szabályozhatjuk a VALIGN paraméterrel. Minta: <CAPTION VALIGN="TOP"> - Alapértelmezés = A táblázat címe a táblázat fölé kerül. Másik lehetséges érték: BOTTOM = a cím alulra kerül.
•    A két paraméter persze együtt is használható!
•    Szükség esetén egyes cellákat összevonhatunk. A vízszintes irányban az oszlopokat vonjuk össze, tehát a kívánt paraméter: COLSPAN=szám, míg függőleges irányban a sorokat vonjuk össze, így a ROWSPAN=szám szükséges. A két összevonás persze kombinálható is!
14. feladat: Készítsen egy tetszőleges tartalmú 5x5-ös táblázatot, melyben az egyes sorok színe legyen eltérő!
15. feladat: Az előző táblázatban vonjon össze három sort, majd három oszlopot!

•    Minden egyes cella tartalmát darabonként is igazíthatjuk <TD ALIGN="LEFT"> Balra rendez - alapértelmezés </TD> Lehet középre (center) vagy jobbra (right) is rendezni.
•    Persze egyenként is lehetőségünk van a cellák szélességének állítására is az egész táblázat szélességére alkalmazott WIDTH paraméterrel.
•    Minden egyes cellához lehet rendelni egy címet is, mely akkor jelenik meg, ha az illető cella fölé kerül az egér. <TD TITLE="cím"> elem tartalma </TD>.
•    Hosszú szövegeknél előfordulhat, hogy egy sornál több is lehet 1-1 cella tartalma. Ilyenkor jól jöhet a <TD VALIGN="CENTER"> paraméter </TD>, ahol valign = vertical align = függőleges rendezés. Lehetséges értékek: center = közép; top = fent; bottom = alul; baseline = a betűk szintjének aljához igazítja az objektumot.
•    Ennek némileg ellentmond, hogy ha semmiképpen sem akarjuk, hogy egy cellában a szöveget megtörje, akkor használhatjuk a NOWRAP=TRUE paramétert a TD tag-ben. Ekkor a cellatartalom nem kerül törésre. Alapértelmezés: NOWRAP=FALSE.
(azaz a cellatartalom törhető.)
•    Cellánként is lehetőség nyílik háttérszín (BGCOLOR), illetve háttérgrafika (BACKGROUND) definiálására, azért csak óvatosan a díszekkel!
•    Külön lehetőségünk van <TH> táblázat fejlécének - table heat </TH> és <TFOOT> táblázat láblécének - table foot </TFOOT> definiálására is.
•    Értelemszerűen létezik a táblázatnak a törzse is. Ez a <TBODY> és a </TBODY> közé kerülhet.
•    Ezek után már bátran neki lehet állni táblázatok formázásának és kitöltésének!
Megjegyzés: a sima táblázatokat nem feltétlenül könnyű natúr HTML-ben megírni, de sokan azt csinálják, hogy a táblázat alapját megcsinálják WYSIWYG-szerkesztőben, majd az apróságokat utána állítgatják. (Magyarázat: WYSIWYG = What You See Is What You Get = Amit látsz, azt kapod.)
A másik módszer kicsit macerásabb, de nálam bejött: először a táblázat fő paramétereit csinálom meg (sorok és oszlopok száma, szélessége), majd utána az egyes cellák tartalmát; végül az apróbb finomításokat.