Táblázatok beszúrása

Táblázatok beszúrása HTML dokumentumba, 2. felvonás

Átvettük az előző lapon a táblázatok készítésének alapjait. Érdekes módon a HTML nem elsősorban formázott adatmegjelenítésre használja a táblázatokat (arra is!), sokkal inkább a weblapon megjelenő információk tagolására, igazítására. Ezt támasztja alá az align és a valign is, ahogy azt már az előzőekben láthattuk. Ezt szem előtt tartva lássuk a táblázatok "ínyenc" részét, ismerkedjünk meg a cellák egyesítését és a cellák egymáshoz való viszonyát meghatározó attribútumokkal.
<TABLE> extra attribútumleírás

cellpadding | A cellákon belüli margó méretét állíthatod be vele. Figyeld meg az előző példákban, hogy egyik alkalommal sem szorult a szöveg a cella széléhez, mindenhol látható volt egy margó (minden irányban!).
cellspacing | A cellák egymástól való távolsága. Másképpen a rácsvonalak szélességének is tekinthető.

Nézzük át a <TD> tag extra attribútumait is:
<TD> extra attribútumleírás

colspan | Cellák vízszintes összefűzését tudjuk vele elvégezni. Paramétere azt adja meg, hogy hány cella legyen összefűzve.
rowspan | Függőleges összefűzés, paramétere azt adja vissza, hány egymás alatt levő cellát kell összefűzni.
| Fontos megjegyezni, hogy a <TD> helyett használhatjuk a TABLE HEADER, azaz <TH> tag-et is, amelynek segítségével fejlécet készíthetünk a táblázatunknak. Igazából különbség nem nagyon van, csupán félkövérré válnak a karakterek, és középre igazítódik a paragrafus.

Kis képi magyarázat, mivel egy kép többet ér ezer szónál (néha!):
Ne vegye el a kedvünket, ha nem teljesen érthető a fenti négy attribútum, nem egyszerűek. Mint minden, csak sok munka és ismétlés útján szerezhető belőle megfelelő gyakorlat. Akkor gyakoroljunk egy kicsit!
Gondolkodjunk együtt!

Most én adok egy forráskódot, a te feladatod az lesz, hogy kilogikázd, hogy fog kinézni a táblázat. Segítségül veheted az előző és az aktuális lapot, vagy ha másképpen nem megy, nézd meg a megoldás és a hozzá kapcsolódó animációt, majd próbáld a feladattal összevetni és megérteni az összefüggéseket.