A táblázatok nagyon fontosak a honlapszerkesztésben. Sokan az egész weboldalukat táblázatokból építik fel. ...bár ez kezd kimenni a divatból - ha lehet ilyet mondani!:P

Nem is olyan könnyű megérteni a táblázatok kódját, de ha picit jobban megnézed ezt a képet, rá fogsz jönni a logikájáral. Táblázatba táblázatot is lehet ágyazni! Ilyenkor viszont nagyon vigyázz a nyitóés a záró tag-ek helyére!:)

Tehát a táblázatok alapfelépítése egy jó kis kép segítségével.

Az összetevők

A table magyarul tábla. Ezzel fog kezdődni a kódunk. Ez magát a táblázatot jelenti!
A tr annyit jelent, mint table row, azaz a táblázat sora.
Igazából nem szükséges a th tag, azt jelenti, table header, a táblázat fejléce. Ezt ki is hagyhatjuk!
A td pedig table data, ezek a cellák.

A kép HTML kódban leírva így néz ki (a **** a tartalom helyét jelenti):

Elmagyarázom... Megnyitjuk a táblázatot. Kezdünk egy új sort, benne van három cella (ez a sor ebben az esetben a táblázat fejléce, majd bezárjuk. Alatta van még két sor, szintén három cellával, mint az első. Végül bezárjuk a táblázatot. Nem is olyan nehéz!:)

Beállítások - Táblázat

Most nézzük meg, milyen beállítások tartozhatnak a table tag-hez. Egy példán keresztül bemutatom. Persze nem kötelező használni őket, de azért hasznosak...:P

Width: Szélesség, height: Magasság. Ez lehet százalékban (az oldal szélességéhez hasonlítva), vagy pixelben.
Cellspacing: A cellák közötti kihagyott hely (pixelben). Ha keretet adsz meg, látszódni fog!:)
Cellpadding: A cella kerete és a szöveg között kihagyott hely. Ez láthatatlan, csupán a szöveg és a cella széle közötti hely (pixelben).
Border: Keret szélessége (pixelben), Bordercolor: A keret színe (ha nullát adtál meg szélességnek, akkor ez természetesen nem szükséges).
Align: A táblázat igazítása (nem a benne lévő szövegé). Lehetséges: left, center, right (bal, közép, jobb).
Background: A háttérkép (ez az egész táblázatra vonatkozik!). Ha nem adsz meg, a háttérszín látszik.
Bgcolor: Ez pedig a háttérszín (szintén az egész táblázaté). Ha ezt sem adsz meg, olyan a táblázat háttere, mint az oldalé.

A cellák beállításai

Ezek pedig a td (vagy a th) tag beállításai. Egy csomót lehet használni a table tagban is, de azok az egész táblázatra vonatkoznak. Ha csak egy cellát szeretnél formatálni, akkor csak abba kell belerni a kódot! Példa:

Width: Szélesség, height: Magasság. Ez ugyanaz, mint a táblázatnál, csak a cella méretére vonatkozik. Az egy sorban lévő cellák mérete összeszámolva a táblázat méretét kell, hogy eredményezze (ha meg van adva, ha nincs, akkor olyan széles és magas lesz a táblázat, amilyen széles a tartalom; ha cellaméretet nem adsz meg, akkor egyenletesen osztja el a cellákat a böngésző).
Align: A cellán belüli szöveg igazítása (left, center right), valign: a függőlegesen való igazítás (top, middle, bottom).
A többi beállítás mind ugyanaz, mint a táblázatnál, csakhogy ezek mind a cellára vonatkoznak!

Akkor most nézzünk meg egy konkrét példát!:)

...és így fog kinézni:

abc	def
ghi	jkl

És most tessék gyakorolni! Találj ki magadnak példákat!:)