WEBDESIGN - Tippek és Trükkök, kezdéshez
Hogyan kezdjem? (honlapkészítés házilag 2. rész)
Hogyan kezdjem cikksorozatunk 2. részében tovább folytatjuk az alapfokú honlapkészítés elsajátításának tárgyalását. A korábbi gyakorlatnak megfelelően közérthető és egyszerű nyelven.
Táblázatok készítése
Ebben a cikkben lépésről-lépésre megnézzük, hogyan tudunk táblázatot készíteni az alábbi minta alapján.
Ez a táblázat fejlece | Ez a sor végig kövér betűvel van írva | Azért kövér mert a <TH> elemet használjuk | A <TH> a táblázat fejlecét jelöli |
---|---|---|---|
Ez a cella szélesebb mert a COLSPAN értéket 2-re állítottuk | Ez egy normál cella | Ez a cella magasabb mert a ROWSPAN értéket 2-re állítottuk | |
Ez egy normál cella | Ez egy normál cella | alulra és jobbra |
A következőkben láthatjuk a HTML kódot. ami létrehozza ezt a táblázatot. Minden elemét magyarázat követ, hogy megmutassuk melyik részlet mit is csinál. Figyelje a magyarázatokat és meg fogja érteni a táblázat létrehozásának alapszabályait.
<table border="1" cellpadding="5" cellspacing="5">
Border - A táblázat kerete 1 pixel szélesre van állítva. Ha azt szeretné hogy ne látszódjon a keret ezt az értéket 0-ra kell állítani.
Cellpadding - (helyköz a cellán belül, belső margó) = 5 pixel.
Cellspacing - (helyköz a cellák között, ettál látszik szélesebbnek a keret) = 5 pixel.
<caption align="top">Táblázatunk címe</caption>
Caption elem - Az itt elhelyezett szöveg a táblázatunk felett látszik.
<tr>
Ez az elem mondja meg a böngészőnek, hogy új sort nyitunk a táblázatban.
<th bgcolor="#FFFFCC">Ez a táblázat fejlece</th>
<th bgcolor="#FFFFCC">Ez a sor végig kövér betűvel van írva</th>
<th bgcolor="#FFFFCC">Azért kövér mert a <TH> elemet használjuk</th>
<th bgcolor="#FFFFCC">A <TH> a táblázat fejlecét jelöli</th>
<th> elem jelenti, hogy ez a táblázat fejlece "Table Header". Az itt lévő szövegek mindig vastagon vannak megjelenítve. Ugyanúgy, mint a <td> elemnél, a <th> elemnél is használhatjuk a bgcolor tulajdonságot a háttér színének megadására. igaz, hogy ez nem szabványos a HTML 3.2 előírásban, de mind a Netscape és Explorer böngészők értik ezt. Használható még a background="háttérkép.gif" kifejezés is, ami egy háttérben lévő képet helyezne a táblázatba.
</tr>
A sor befejezése.
<tr>
Új sor indítása.
<td colspan="2">Ez a cella szélesebb mert a COLSPAN értéket 2-re állítottuk</td>
<td>Ez egy normál cella</td>
<td rowspan="2">Ez a cella magasabb mert a ROWSPAN értéket 2-re állítottuk</td>
<TD> = "table data" azaz tábla adat. COLSPAN azt jelenti, hogy az adott cella hány cella szélességű legyen megjelenítéskor. ROWSPAN azt jelenti, hogy a cella hány cella magasságú legyen. Ha nem adjuk meg akkor 1 az alapérték.
</tr>
A sor befejezése.
<tr>
Új sor indítása.
<td>Ez egy normál cella</td>
<td>Ez egy normál cella</td>
<td valign="bottom" align="right">alulra és jobbra</td>
ALIGN igazítást jelent méghozzá ebben a formában vízszintes irányú igazítást. Ennek alapértéke, ha nem adjuk meg, akkor "left" azaz balra. VALIGN a függőleges igazítás eleme. Az alapértéke "middle" azaz a cella közepére.
</tr>
A sor bezárása.
</table>
A táblázat befejezése.
Most már ismeri a táblázatkészítés alapelemeit és a hozzájuk fűzhető tulajdonságok helyét is. Nyugodtan lehet próbálkozni a tulajdonságok módosításaival, hamar rá lehet érezni a rejtelmekre.
Felhívom mindenki figyelmét, hogy a mai modern honlapkészítés alapelvei, a táblázatos honlapösszeállítást ellenzik, mivel a táblázatokat nem a webdesign összeállítására találták ki, hanem adatok táblázatos formában történő megjelenítésére. Ezt vegyük figyelembe, de azt is el kell mondjam, hogy a táblázatok segítségével könnyen és gyorsan érhetünk el eredményt. Kezdők nyugodtan használják a haladók próbáljanak meg más lehetőségeket keresni (természetesen későbbi cikkeinkben kitérünk más megvalósíthatóságokra is.)
Következő leckénkben a fix és dinamikus méretű táblázatok kezelésével és egyéb kiegészítő lehetőségekkel fogunk foglalkozni.
Jó tanulást.