Üdvözlünk mindenkit a Blurred Colors-on, amely továbbra is az első és egyetlen magyar szerepjátékos és grafikai fórum, illetve annak közössége. Kedves, segítőkész emberekkel, változatos versenyekkel, sokoldalú kódokkal, grafikákkal és egyéb hasznos dolgokkal látjuk el a rászoruló eltévedt szerepjátékozni, vagy épp csak képet szerkeszteni vágyókat. Csatlakozz hozzánk te is! Regisztrálj, de még mielőtt megtennéd, kérlek, olvasd el a szabályzatunkat.






a hónap aláírása by
don'tFORGET


a hónap blendje by
away from the light &


a hónap ikonszettje by
light up the world


  
  válaszol új topik szavazás

» Table 2.0, ~táblázatok és képek~
gazdy
 Posted: Oct 7 2011, 04:52 PM
idézés



Group Icon

Group: statiszta
Posts: 47
Member No.: 11
Joined: 19-September 11









TÁBLÁZAT 2.0?!?!

HELLO KEDVES IDEGEN! Itt a következő lecke. Ezúttal a táblázatokban használt képeket mutatom meg nektek. Láttál már olyat, hogy kép volt maga a háttér, esetleg minden tábla dobozba más kép volt? Nos, itt minden titokra fény derül! Egy egyszerű levezetésen keresztül megmutatom, hogyan is néz ki a dolog pontosan wink.gif

Elsőként azt kell megtanulnunk, hogy hogyan is néz ki egy táblázat. A táblázatok mint tudjuk sorokból és oszlopokból állnak. Egy táblázatnak több sora és oszlopa is lehet.


Ez a következőképpen néz ki dohtml-ben:
táblázat 001 (1. sor 1. oszlop)
táblázat 002 (1. sor 2. oszlop)
táblázat 003 (2. sor 1. oszlop)

táblázat 004 (2. sor 2. oszlop)


Most pedig nézzük meg, hogyan is épül fel a táblázatunk:
QUOTE
<center>
<TABLE><TR>

<TD><div style="width:200px; height:100px; border:1px solid #000; background-image: url(http://i1202.photobucket.com/albums/bb371/gazdy/elenacom.gif); color: #FFF">táblázat 001 (1. sor 1. oszlop)</div></td>

<td><div style="width:200px;height:100px; border:1px solid #000;">táblázat 002 (1. sor 2. oszlop)</div></td></TR>

<TR><td><div style="width:200px;height:100px; border:1px solid #000;">táblázat 003 (2. sor 1. oszlop)</div></td>

<td><div style="width:200px; height:100px; border:1px solid #000;"><img src="http://i1202.photobucket.com/albums/bb371/gazdy/elenacom.gif"><br>táblázat 004 (2. sor 2. oszlop)</div></td></TR>

</TABLE>
</center>


Mindkét esetben a piros színnel jelzett rész a szélességet, míg kék színnel jelölt a magasságot határozza meg; a zöld szín pedig a táblák szegélyeit jelölik.
A lila színnel jelölt részek már érdekesebbek. Az első esetben háttérképként egy a táblánál nagyobb képet adtam meg. Ekkor a táblázathoz igazítva úgymond "levágta" a kép kilógó részeit a kódunk. A fekete színnel jelölt rész a szöveg táblánk/dobozunk betűszínét hivatott az alapértelmezett feketéről fehérre változtatni, hogy a képen látszódjon majd.
A második esetben a lilás részünkben nem a tábla tulajdonságai közé raktam a képet háttérképként, hanem simán a táblába. Így az - akárcsak az alatta lévő szöveg - kilóg a táblánkból, hiszen nagyobb a táblánál a magassága a képnek.
Ha valaki a szövegdobozba szeretne képet berakni figyeljen arra, hogy a kép mérete illeszkedjen (ugyanakkora vagy kisebb legyen, mint a tábla magassága és szélesség) a táblához. Vagy ha nem szeretne módosítani a képe méretén, a már korábban ismertetett OVERFOW funkciót állítsa be a < DIV STYLE > tagen belül.
A narancs továbbra is a szövegdobozunkba került szöveges tartalmat mutatja.



Nos, a tanmesém végéhez ért, remélem hasznos volt számotokra. Már csak némi visszajelzését szeretnék kapni tőletek! Hasznos volt ez egyáltalán? Van valami, amit esetleg magyarázzak meg ezzel kapcsolatban? Tudasd velem, és én megpróbálom a legjobb tudásom szerint megválaszolni a dolgot.

--------------------
user posted image
pm
^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options válaszol új topik szavazás