Ü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, ~táblázatok~
gazdy
 Posted: Oct 7 2011, 04:50 PM
idézés



Group Icon

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









TÁBLÁZAT?!?!

HELLO KEDVES IDEGEN! Itt a következő lecke. Ezúttal a táblázatok használatát mutatom meg nektek a dohtmlben. Láttál már olyat, hogy képek, esetleg szövegek voltak egymás mellett és alatt elrendezve? Nos, ez a táblázatok segítségével könnyedén megoldható bárki számára. 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. osszlop)


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;">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;">táblázat 004 (2. sor 2. oszlop)</div></td></TR>

</TABLE>
</center>


A piros színnel jelzett < TABLE > tag adja magánnak a táblázatnak az alapvázát. Ezen belül helyezkednek el a táblázat sorai és oszlopai.
A kék színnel jelölt < TR > tag-es része a táblázatunk soraira vonatkozik. Minden új sor elejére új TR taget kell tennünk. FONTOS: Ne feledjük lezárni a tageinket, különben elég furcsa, szétcsúszott valamit kapunk eredményül.
A lila színnel a táblázat sorain belül az oszlopokat jelöltem. Ezeket a < TD > tag segítségével készítettem el. Itt is igaz, hogy minden új oszlophoz új TD taget kell raknunk.
A zöld színű rész adja meg, hogy a táblázatunk aktuális sorának és oszlopának metszéspontja hogyan is nézzen ki. Itt adhatjuk meg a táblázatunk szövegdobozának szélességét (WIDTH), magasságát (HEIGHT). Valamint azt is, hogy akarunk-e látható szegélyt a táblánknak. Nálam van szegély (BORDER), méretét tekintve 1 px vastagság és szimpla fekete (SOLID #000). A < DIV STYLE > részen belül igazából akármit beállíthatunk, a betűszíntől kezdve a betűtípuson át bármit. Csak ne felejtsük el lezárni ezt sem!
A narancs rész is fontos. Ide kerül ugyanis a táblázatunk tartalma. Tehetsz bele képet, szöveget vagy bármit, amit szeretnél táblázatos elrendezésben látni később.



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