< WebKészítés /> interaktív webszerkesztő tananyagok
Táblázatok
Bizonyos helyzetekben jól jön, ha táblázatba rendezzük a dolgainkat. Szebb, átláthatóbb, rendezettebb lesz tőle oldalunk. Nem is beszélve arról, hogy a táblázat keretrendszerébe könnyen illeszthető az oldalak felülete.
A táblázat, mint blokk egység, a két <table> címke közé kerül. A <table> attribútumai lehetnek a már ismert width, height és a summary, ami egy összefoglaló leírást tartalmazhat a látássérültek felolvasó programjainak. Az XHTML-ben már elavult a border. Ha értéke =, a böngészőtől alap vonalvastagságot kap, ha értéke "border"0, akkor pedig osztóvonalak nélküli mátrixot kapunk. Ugyancsak elavult a cellspacing (szomszédos cellatávolság) és a cellpadding (tartalom és vonal távolsága). Ezeket inkább később, CSS-sel adjuk meg. A táblázat címét (vagy felette álló magyarázó szövegét) a nyitó és záró tábla címkén belül a <caption> és a </caption> tag szegélyezi.
Minden egyes sort a <tr> (Table Row) vezet be és (</tr>) zár le. A cellákat ezek közé kell elhelyeznünk a <td> és </td> tag-ekkel. Ezek közé kerülhet a tartalom. (Lásd: Ms Excel) Ha egyes cellák fejlécként funkcionálnak, a <th> </th> (Table head) címkére cserélhetjük a <td> </td>-t. Utóbbiakban szintén használhatjuk a width-et és az elavult align="left/center/right"valign="top/middle/bottom"<thead> </thead> (táblázat fejléce), a <tbody> </tbody> (táblázat törzse) és a <tfoot> </tfoot> (táblázat lábléce), melyeknek a böngészők nem igazán tulajdonítanak nagy figyelmet. A lényege, hogy a <thead> </thead> tartalma mindig fölé illetve a <tfoot> </tfoot>-é mindig alá kerül a <tbody> </tbody>-nak, bárhol is van a table címkén belül a kódban. A gyakorlatban ritkán tesszük ki őket.
Megesik, hogy össze kell vonnunk néhány cellát pl. közös cím érdekében. Ezt úgy tehetjük, hogy pl. a 3 <td> vagy <th> helyett csak egyet nyitunk és benne a colspan=""rowspan alkalmazandó.
Mivel a vízszintes osztások könnyen csoportosíthatók és együtt formázhatók (lásd.: <tr>), a függőleges oszlopok pedig nehezen egyesével, ezért létrehozták a függőleges irányú csoportosításra egy módszert, melynek fő eleme a <colgroup> </colgroup> és ennek belső elemei a <col /> -ok. Csak el kell helyeznünk a <thead> ésatöbbin kívül, de még a <table>-n belül ezeket a csoportokat (akár többet is). Itt megadhatjuk a már ismert módon az egyes oszlopcsoportokra a tulajdonságokat az ismert attribútumokkal. Bennük pedig ahány oszlopra vonatkozik annyi <col />-t helyezünk el. Ezek szintén megkaphatják az előbb említetteket, illetve még itt lehetőség nyílik a span=""<td>-khez hasonló módon összevonni az azonos tulajdonságú oszlopokat. Valószínűleg elsőre nem teljesen világos, így a mellékelt gyakorlat hivatott oszlatni a káoszt. Megjegyezném még, hogy ez a módszer elég újkeletű (XHTML-lel jött be), így nem minden böngésző tolerálja. Érdemes inkább minden egyes <td>-ben megadni a formázást, ha lehet.
Általános blokk elem
Említettem már, hogy a táblázat régen tökéletesnek bizonyult a honlapok grafikájának tárolására, azonban elég bonyolulttá tette a honlapokat a nem pc-s felhasználók számára. A CSS elterjedésével a <div> </div> általános blokk elem hasznosabb módszer lett. (Ne keverjük a <span> </span> általános sorbeli elemmel!) A <div>-ek a tanult id-vel azonosíthatók (későbbi formázásnál így fogunk hivatkozni rájuk), egymásba ágyazhatók, elrejthetők. Persze ha csak két hasábra kell bontani a szöveget a táblázat is jó, de bonyolultabb esetekben javallott az áttérés.
Eddig még senki sem írt hozzászólást... Légy te az első!
Új hozzászólás írásához lépj be fiókodba vagy regisztrálj oldalunkon!