HTML tanfolyam ingyen: Táblázatok

A HTML nyelv egy igen fontos elemével fogunk megismerkedni. Ez nem más mint a táblázat tag. (<table> </table>)
Akik valamennyire már ismerosek a számítástechnika világában, azok biztosan találkoztak már több alkalommal is táblázatokkal. Általában bizonyos adatok, statisztikák érthetobb formáju elrendezésérol van szó az ilyen esetekben. A HTML nyelvben is használhatjuk ilyesmire természetesen a táblázatokat, de egy ettol sokkal lényegesebb tulajdonsága miatt lesz az eggyik legfontosabb nyelvi elem, ez a tulajdonság nem más mint az oldal elrendezése, megjelenési képe.
Ha visszanézzük a leckénk elozo részeiben vett példákat, láthatjuk, hogy egyik alkalommal sem foglalkoztunk az oldal megjelenésének rendezésével. De valyon megtehettük volna az eddig megismert tag-ek segítségével? A válasz erre a kérdésre az, hogy csak minimális rendezést vihettünk volna véghez. Balra-, jobbra- vagy sorkizásrt illetve középre rendezést. Ezek bekezdésenként jól elkülöníthetok, de egy kekezdésen belul már nincs mit kezdeni. A táblázat viszont átsegít ezeken a korlátokon. Lássuk mirol is van szó?
<table> </table>: amint azt már az elobb is vettük, ez a táblázat kezdetét és végét jelzo tag-pár. A tag tetszoleges törnyezetbe beágyazható, akár több táblázat is összekombinálható. A lehetséges opciók:
bgcolor="a táblázat háttérszíne"- a teljes táblázatra vonatkozik, a megismert megadási módok itt is használatosak
background="háttérkép"- a teljes táblázatra vonatkozik, mozaik szeru elrendezésben lesz elhelyezve a választott kép, ahogyan azt már a <body> tag esetében is megismertük
width="szélesség"- a táblázat egésszének szélessége, megadhatjuk képpontokvan vagy százalékban is, ahol a betöltheto teljes területhez viszonyítunk
height="magasság"- a táblázat magasságát adja meg, az elozohöz hasonló formában adható meg
border="keret szélesség"- a használni kívánt keret szélessége, a szélességet képpontokban kell megadnunk
bordercolor="egyszínu keret szine"- a keret színe, a szokásos megadási formákkal
bordercolorlight="kétszíno keret elso szín"- használhatunk térbelinek tuno keretet is, ekkor két színbol kell összeállítanunk, ez az elso és
bordercolordark="kétszínu keret második szin"- ez pedig a második komponens
cellspacing="függoleges mezotávolság"- a táblázat meoinek függoleges irányú távolsága
cellpadding="vizszintes mezotávolság"- az elozo tulajdonság vizszintes változata
align="vizszintes elrendezés"- a táblázat mezoinek vízszintes igazítása, értékei a már jól ismertek, és ezek érvényesek a továbbiakban is: center, left, right, justify.
valign="függoleges elrendezés"- a táblázat mezoinek függoleges elrendezése, értéke lehetnek: center, top(tetejére), bottom(alulra)
A továbbiakban nézzük a táblázat gerincét alkotó elemeket. A táblázatoknak vannak sorai és mezoi, természetesen a HTML is ezt a megközelítést alkalmazza. A sorok és mezok tartalma bármilyen HTML elem lehet, akár egy újabb táblázat is.
<tr> </tr>- a táblázat sorait jelölo tagpár, a megadható tulajdonágai felülbírálják a táblázat kezdorészénél megadott tulajdonságokat:
bgcolor=""- a sor színe
background=""- a sor háttérképe
width=""- a sor szélessége, megadható képpontban vagy százalékban, ekkor a százalék a táblázat tagben megadott értékre vonatkozik, ha az hiányzik, akkor a teljes betöltheto területre
height=""- a fenti függoleges változata
align=""- a mezok vizszintes elrendezése
valign""- a mezok függoleges elrendezése
<td> </td>- a táblázat mezoit jelölo tagek. A sorral megegyezo paramétereket viselhet és azok tulajdonsága is hasonló:
bgcolor=""- az adott mezo háttérszíne
background=""- az adott mezo háttérképe
width=""- az adott mezo szélessége, a szélességet megadhatjuk képpontokban vagy százalékban, a százalékos formánál az adott sor szélességére vayg annak hiányában a táblázat szélességére, ha az is hiányzik akkor pedig a használható helyre kell vonatkoztatnunk
height=""- az adott mezo magassága
align=""- az adott mezo vizszintes rendezése
valign""- az adott mezo függoleges rendezése
A táblázatoknél alkalmazható még egy érdekes és gyakran hasznos elem a táblázat fejléce eleme. Ezt közvetlenül a táblázatot feltölto elemek elott kell beszúrnunk. Jelölése:
<caption> </caption>- tartalma bármilyen html tag lehet, akár táblázat is, egyetlen paraméterei: align="", valign=""; ezek funkciói megegyeznek a a már megismertekkel. Paraméterei: center, left, right, top, bottom. A függoleges igazítás a táblázat aljára illetve tetejére rendezést jelenti.
Tehát egy táblázat hierarchikus felépítése lehet pl. a következo:
<table>
<caption>.</caption>
<tr><td>..</td>.<td>..</td></tr>
<tr>....</tr>
..
</table>
Ezzel végigvettük, hogy a táblázat milyen elemekbol épülhet fel. A használatához némi gyakorlat szükséges, mert a dokumentum ilyen módon történo elrendezése kissé szokatlan lehet a most eloször használóknak. Példáúl: táblázatok segítségével szokták a weblapok menüsorát, gombsorát kirakni, vagy a híroldalak hasábjait képezni és még számos felhasználási területe létezik.
Következo példánkban egy fantázia operációs rendszer fantázia ablakát kiséreljük meg létrehozni:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Táblázat példa</title>
</head>

<body>
<table width="310" cellspacing="0" cellpadding="0" bgcolor="#a5c3f3">
<tr><td>
<table align="center" border="2" bordercolor="#000000" cellspacing="0" cellpadding="0" width="300" height="200" bgcolor="#408080">

<caption align="bottom" valign="top"><table cellspacing="0" cellpadding="0" width="300" height="20" bgcolor="#733424">

<tr>
<td width="20" align="center" valign="center"><font size="3" color="yellow">X</td>
<td bgcolor="#5c470a" width="240" align="center" valign="center"><font size="2" color="red"><b>Az ablak címe</b></td>
<td width="20" align="center" valign="center"><font size="3" color="yellow">_</td>
<td width="20" align="center" valign="center"><font size="3" color="yellow">[ ]</td>
</tr>
</table>
</caption>
<tr>
<td align="center" valign="top" width="280" heigth="180"><font size="3" color="#4e0a68"><b>Ez itt az ablaktörzs</b>
<br><table width="90%" heigth="95%" bgcolor="#d7a001"><tr>
<td width="50%" heigth="100%" bgcolor="#0089ee" align="center" valign="bottom">ME</td>
<td width="50%" heigth="100%" bgcolor="#04b211" align="center" vailgn="top">ZÕ</td>
</tr></table>
</tr>
<tr>
<td height="10" align="center" valign="bottom"><font size="1" color="yellow"><b>Ha már ilyet tudunk készíteni, akkor gyakorlottak vagyunk...</b></td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>

Honlapkészítés

A táblázatokról másképp

Ha "rendet akarunk teremteni" a képernyőm, akkor igen korlátozottak a lehetőségeink, hiszen nem tudhatjuk ki milyen képernyőfelbontással, milyen web-böngészővel, mekkora ablakot használva tekinti meg munkánkat. A táblázatok használata igen hatékony lehetőséget jelent. Táblázat készítéséhez a <table> </table> parancsot kell kiadni a sorokat a <tr> </tr> jelek közé kell helyeznünk (tr=table row=tábla sor), a cellákat a <td> </td> (td=table data=tábla adat) szimbólumoknak kell határolniuk. Az alábbi példa egy 2x3-as táblázatot állít elő:

Melynek eredménye:

I. sor 1. elem	I. sor 2. elem	I. sor 3. elem
II. sor 1. elem	II. sor 2. elem	II. sor 3. elem

A rend kétségtelen, de jó volna a cellákat vonallal elválasztani. Ezt a border (határ) paraméter megváltoztatásával tehetjük meg. Ez alaphelyzetben 0.

Melynek eredménye:

I. sor 1. elem	I. sor 2. elem	I. sor 3. elem
II. sor 1. elem	II. sor 2. elem	II. sor 3. elem

Kicsit szorosan vannak az adatok, ezen a cellpading (cellabélelés) paraméter megváltoztatása segít, ami a cellahatár es az adatok távolságát mutatja meg. Ez alaphelyzetben 0-2 között lehet.

Melynek eredménye:

I. sor 1. elem	I. sor 2. elem	I. sor 3. elem
II. sor 1. elem	II. sor 2. elem	II. sor 3. elem

A cellspacing, a cellák távolságát jelöli. Ez alaphelyzetben 0-1 között lehet.

Melynek eredménye:

I. sor 1. elem	I. sor 2. elem	I. sor 3. elem
II. sor 1. elem	II. sor 2. elem	II. sor 3. elem

A táblázatnak nevet is adhatunk, melyet a <caption> </caption> (caption=felirat) szimbólumok közé kell elhelyeznünk. Azt, hogy a név a táblázat alá vagy fölé kerüljön az align=top illetve align=bottom opcióval dönthetjük el. (align=elrendezés, top=felül, bottom=alul). Ha az alignt nem tüntetjük fel, az alaphelyzetben top. Az alábbi példák egy 1x2-es táblázatot állítanak elő alsó és felső feliratozással:

<table border=1>
<caption>név felül </caption>
<tr><td>1. elem</td><td>2. elem</td></tr>
</table>

Az eredmény:

név felül
1. elem	2. elem

A fenti eredmény nem változott volna, ha kiírjuk, hogy align=top.

Az eredmény:

név alul
1. elem	2. elem

A cella tartalma alaphelyzetben balra záródik. Ha középre vagy jobbra akarjuk zárni, azt külön kell parancsba adnunk. Ezért az előbb már látott align opció felelős. Az align alaphelyzetben left (bal), de lehet center (közép) és right (jobb) is.

<table border=1>
<tr><td>cellaelem</td><td>cellaelem</td></tr>
<tr><td align=center>közép</td><td align=right>jobb</td></tr>
</table>

Az eredmény:

cellaelem	cellaelem
közép	jobb

Gyakran fordul elő - különösen az első sorban, hogy a cella elemeit kövér betűkkel szertnénk írni és középre akarjuk rendezni. Ehhez már minden eszközt ismerünk, hiszen az align=center opciót választva és a szöveget <b></b> közé helyezve ez meg is történik, de mindezt egyszerűbben is elérhetjük: a <td></td> jelek helyett a <th></th> szimbólumok közé kell helyezni a cellát. (th=table header=táblázat fejléc)

<table border=1>
<tr><th>1.</th><th>2.</th></tr>
<tr><td>cellaelem</td><td>cellaelem</td></tr>
</table>

1.	2.
cellaelem	cellaelem

Különösen hosszabb szövegeknél fordul elő, hogy nemcsak vízszintesen, hanem függőlegesen is szeretnénk rendezni a szöveget. Ekkor a valign (vertical align= függőleges elrendezés) opciót kell állítani. A valign alaphelyzetben center (közép) állítható még felülre (top) és alulra (bottom).

<table border=1>
<tr><td>az első cellaelem egy viszonylag hosszú szöveg, így egészen biztosan nem fér el egy sorban</td>
<td valign=top>felül</td>
<td valign=bottom>alul</td>
<td>alaphelyzet</td>
</tr>
</table>

Melynek eredménye:

az első cellaelem egy viszonylag hosszú szöveg, így egészen biztosan nem fér el egy sorban

felül

alul

alaphelyzet

Természetesen az eddig ismertetett opciók és parancsok kombinálhatók is.
Gyakran előfordul, hogy a táblázat néhány celláját egyesíteni szeretnénk vízszintesen vagy függőlegesen. Erre célra a colspan és a rowspan opciókat kell megváltoztatnunk. (colspan=column span=oszlopfeszítés, rowspan=row span=sorfeszítés). Ezen változók értéke alaphelyzetben 1. Amennyiben más értéket állítunk be, ennek hatására az adott cella több (a megadott értéknek megfelelő számú cella) helyét foglalja el.

A fenti utasítássor egy három sorból és három oszlopból álló táblázatot készít, ahol a második sor második és harmadik elem helyett alkottunk egy cellát a colspan opció 2-re történő állításával.

I.1.	I.2.	I.3.
II.1.	II.2-3.
III.1.	III.2.	III.3.

Függőlegesen is megtehetjük ugyanezt.

A fenti parancssor az első sor és a második sor első eleme helyett hoz létre új cellát.

I.-II.1.	I.2.	I.3.
I.-II.1.	II.2.	II.3.
III.1.	III.2.	III.3.

A böngészők a meglevő adatok alapján egy optimális táblát kísérelnek meg elkészíteni. Újabb paraméterek segítségével újabb tulajdonságokat változtathatunk meg. A táblázat szélességét is megváltoztathatjuk a width(=szélesség) opcióval. Ennek értékét pixelben és százalékban is megadhatjuk. A 100% a rendelkezésre álló területet jelenti, ha az adott értékekkel lehetetlen táblázatot készíteni, akkor a böngésző megpróbálja a lehető legjobb közelítést adni.

Az eredmény:

I.1.	I.2.	I.3.
I.1.	I.2.	I.3.

A cellák szélességét is állíthatjuk:

Az eredmény:

I.1.	I.2.	I.3.
I.1.	I.2.	I.3.

Táblázatok másképp
Egy táblázat elkészítéséhez az alábbi "keret" kell:
<HTML>
<HEAD>
<TITLE>Honlapcím</TITLE>
</HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Minden táblázatnak kell,hogy legyen egy sora:
<TABLE>
<TR>
</TR>
</TABLE>
És egy oszlopa:
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
Egy 3x2-es Táblázat kitöltése:
<TABLE>
<TR>
<TD>Ed</TD>
<TD></TD>
<TD</TD>
</TR>
<TR>
<TD</TD>
<TD</TD>
<TD</TD>
</TR>
</TABLE>
Ahhoz, hogy megjelenítsük, változtassuk meg a táblázat kezdetét:
<table BORDER=3 WIDTH="330" HEIGHT="75" >
Ezzel a keret vastagságát és max. szélességét is definiáltuk.
A BORDER a táblázat keretvastagságát határozza meg (ha 0 (nulla), nem látszik;
A WIDTH és a HEIGHT pedig ugyanúgy, mint a képeknél: a szélességre és a magasságra vonatkozik.

1	2	3
A	B	C

Ahhoz, hogy középre kerüljenek:
<TD ALIGN=center VALIGN=middle>Ed</TD>
ALIGN lehet: left, center, right (vízszintes igazítás)
VALIGN lehet: top, middle, bottom (függőleges igazítás)
Egyedi oszlopszélességek:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD ALIGN=left VALIGN=top WIDTH=40%>Ed</TD>
<TD WIDTH=60%>Tom</TD>
</TR>
</TABLE>

Tom

Kép beszúrása cellába:
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN="left" VALIGN="middle"> <IMG SRC="hoppá.gif"
WIDTH=32 HEIGHT=32 ALT="Ed"> </TD>
</TR>
</TABLE>

Képet BACKGROUND="hatter.gif" módon is be lehet tenni (ez az általános).
Ha a TABLE ... lezdetű sorba teszed, akkor az egész táblázat mögött lesz.
Ha egy cellát üresen akarsz hagyni:
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR> <TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>  </TD>
</TR>
</TABLE>

Ha nagyobb üres helyet akarsz hagyni a keret és a szöveg között:
<TABLE BORDER=3 CELLPADDING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR> <TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Moe

Ha a keretet akarod vastagítani:
<TABLE BORDER=3 CELLSPACING=12>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Moe

Szinezés:
<TABLE BORDER=3 BGCOLOR="#FF0000">
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Moe

Vagy kicsit másképp:
<TABLE BORDER=3 BGCOLOR="#FF0000">
<TR BGCOLOR="#009900" >
<TD BGCOLOR="#9999FF" >Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Larry	Curly	Moe

Természetesen a TABLE ... sorból elhagyható a szín definició és "bárhová" lehet tenni.
Ha a táblázat nem 3x2-es:
Azaz az első kettő oszlop helyett csak egy látszik:
<TABLE BORDER=3>
<TR>
<TD COLSPAN=2 >Ed</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed		Rick
Larry	Curly	Moe

Kicsit más:
<TABLE BORDER=3>
<TR>
<TD COLSPAN=3 ALIGN="center">< A HREF="http://htmlinfo.fw.hu/" >Ed</A></TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed
Larry	Curly	Moe

Vagy, ha függőlegesen akarunk több cellát összevonni:
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2 >Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom	Rick
Ed	Curly	Moe

Illetve így is, úgy is:
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2 >Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>
<TR>
<TD>Curly</TD>
<TD>Moe</TD>
</TR>
</TABLE>

Ed	Tom
	Curly	Moe

HTML tanfolyam ingyen

Táblázatok

Enews And Updates

MENŰ

Followers

Archivo del blog

Labels

Blog Archive

Advertisement