Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 627289]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 290475

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49276]
2. CSS
A pozícionálás, és a z-index [26098]
3. CSS
Függőleges menü, legördülő almenüvel [20506]
4. CSS
Függőleges menü készítése listából [20304]
5. CSS
Bevezetés a CSS alapjaiba [19499]
 

 

CSS -> Táblázatok

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-05-10 20:11:56
Lektorálta: adrob
Lektorálva:
2005-10-01 13:33:34 [11797]
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.
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!