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éter angolul</b></td>
<td><b>Magyarul</b></td>
<td><b>Lehetséges értékek</b></td>
</tr>
<tr>
<td>ALIGN</td>
<td>igazítás</td>
<td>left/right/center</td>
</tr>
<tr>
<td>BORDER</td>
<td>keretvastagság</td>
<td>0, 1, 2, 3, ...</td>
</tr>
<tr>
<td>COLS</td>
<td>oszlopok száma</td>
<td>1, 2, 3, 4, ...</td>
</tr>
<tr>
<td>BACKGROUND</td>
<td>háttérszín</td>
<td>szín neve vagy kódja, esetleg kép URL-je</td>
</tr>
<tr>
<td>BORDERCOLOR</td>
<td>keretszín</td>
<td>szín neve vagy kódja</td>
</tr>
<tr>
<td>WIDTH</td>
<td>táblázat szélessége</td>
<td>pixelszá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.