<? print $_ASWC_['NAME'];?> - Tanulj, vagy taníts te is on-line!

<- Előző :: Nyomtatási nézet :: Üzenet az írónak :: Köv. ->

A táblázatok formázásánál nagy előrelépést jelent a CSS. Nem kell minden egyes cella esetében a HTML forrásban begépelnünk a tulajdonságokat - ezzel növelve az oldal méretét, hanem meghatározhatjuk egyszerre azokat a CSS segítségével. Így időt takarítunk meg, és ráadásul táblázatunk minden része ugyanúgy fog kinézni.
A táblázatokat kiválaszthatjuk azonosítójuk alapján (ha DIV-ben van pl) vagy globálisan a következőképp:

table{
......
}

Lehetőség van az egyes sorok, illetve cellák külön formázására is.

tr{
      border-color: #FF0000;
}

td{
      color: #000000;
      background-color: #FBFBFB;
}

1. Általános formázás

1. A táblázat címének helyzetét a caption-side tulajdonsággal érhetjük el. A táblázattól függő helyzete, tehát a táblázat mozgatásakor az így elhelyezett cím is mozogni fog.
Értékei:

top: a cím a táblázat fölött helyezkedik el
bottom: a táblázat alá kerül
left: a cím a táblázattól balra
right: a táblázattól jobbra helyezkedik el

Az utóbbi két pozíciót nem mindegyik böngésző támogatja, használatuk nem ajánlott.

2. A táblázat celláinak szélességét a table-layout tulajdonsággal állíthatjuk be.
Értékei:

fixed: a táblázat oszlopainak szélessége a cellák width (meg kell adni ebben az esetben) értékét veszik fel, függetlenül a tartalom szélességétől. Egyes böngészőkben a túlnyúló tartalom nem jelenik meg, de ennek támogatása nem széleskörű.
auto: az oszlop szélessége tartalomfüggő

3. A táblázatcellák tartalmának függőleges igazítását a vertical-align tulajdonsággal szabhatjuk meg.
Értékei

baseline: alapbeállítás
top: a cella tetejéhez igazodik a tartalom
bottom: a cella tartalma az aljához igazodik
middle: a tartalom középen helyezkedik el

4. A visszintes igazítás. Tulajdonsága a text-align.
Értékei:

center: a tartalom középütt helyezkedik el
top: a tartalom a cella tetjéhez igazodik (fel kerül)
bottom: a cella tartalma alulra kerül
left: balra
right: jobba helyezi a tartalmat

2. A táblázat szegélyei

1. A szegélyek beállítására a border-collapse tulajdonság alkalmas.
Értékei:

collapse: összevont szegélyek
separate: elkülönített szegélyek

2. A szomszédos cellák szegélyei közti távolságot a border-spacing tulajdosággal szabhatjuk meg, elkülönített szegélyek esetén.
Értékei:

Számok amik csak pozitívak lehetnek. Egy értéke esetében minden oldalra vonatkozik, két értéknél az eslő a vízszintes, a második a függőleges helyközt állítja be.

3. A nem látható (hidden) tartalommal rendelkező cellák szegélyeit az empty-cells-el tudjuk beállítani (elkülönített szegélyek esetében).
Értékei:

show: a szegélyek láthatóak
hide: a cellák szegélyei nem láthatóak

A böngészők többsége nem támogatja ezt a beállítást.

4. A szegélyek stílusa. Ezt a border-style tulajdonsággal állíthajuk be.
Értékei (preferált sorrend):

double: dupla vonal
solid: közepes vastagásgú
dashed: szaggatott
dotted: pontozott
groove: vastagabb vonalas
ridge: térhatású
inset: betüremkedő
outset: kitüremkedő

5. A szegély színét a border-color -al hatrozhatjuk meg.
Értékei

hexadec. számok, illetve egyes színek angol neve (előző leckékben volt róla szó)

6. Összevont tulajdonságok.

table {
border: 2px solid #000000;
}

A fenti példa egy 2px vastag solid stílusú fekete keretet eredményez, az összes táblán, az adott lapon.

Témaköreink

DumAblak

On-line

Statisztika

CSS -> Táblázatok

1. Általános formázás

2. A táblázat szegélyei

Hello Vendég