Utolsó módosítás: 11/22/2004 13:07:23 A táblázat megadása a
tag használatával lehetséges. A
és
tageken belül, a
elemekkel adhatjuk meg a táblázat sorait. A
elemek a sorokon belüli cellák létrehozására szolgál.
A
tag paraméterei a következők lehetnek: width: szélesség megadása képpontokban vagy a rendelkezésre álló hely százalékában align: a táblázat igazításának típusa (balra - left, középre - center, jobbra - right) border: a keret vastagsága képpontokban cellspacing: (cellatávolság): az egyes cellák közti hely képpontokban cellpadding: (cellabélés): a cella tartalma és a cella széle közti távolság képpontokban
A
tag paraméterei a következők lehetnek: align: a sorban lévő cellák vízszintes igazításának típusa (balra - left, középre - center, jobbra - right) valign:a sorban lévő cellák függőleges igazításának típusa (felülre - top, középre - middle, alulra - bottom)
A
tag paraméterei a következők lehetnek: align: a cella vízszintes igazításának típusa (balra - left, középre - center, jobbra - right) valign:a cella függőleges igazításának típusa (felülre - top, középre - middle, alulra bottom) (a fenti igazítások felülírják a
tagnél megadott igazításokat) width: cella szélességének megadása képpontokban. (A százalékos megadás nem javasolt...) height: cella magasságának megadása képpontokban. (A százalékos megadás nem javasolt...) rowspan: az adott cella ennyi sor magas lesz. (cellák egybenyitása függőlegesen) colspan: az adott cella ennyi oszlop széles lesz (cellák egybenyitása vízszintesen) A következő példákon keresztül megnézhetitek, hogy az egyes paraméterek valójában mire szolgálnak.
Ha ezt a kódot használod
1. sor 1. elem
1. sor 2. elem
ez lesz az eredménye
1. sor 1. elem 1. sor 2. elem 1. sor 3. elem 2. sor 1. elem 2. sor 2. elem 2. sor 3. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
A kódot módosíthatod az alábbi ablakban:
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
Eredeti visszaállítása
Táblázat kerettel (border),cellabéléssel (cellpading) Border: a táblázat köré rajzolandó keret vastagsága pixelekben Cellpadding: a cellán belül a cellatartalom és a cella széle közti távolság pixelekben
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
A kódot módosíthatod az alábbi ablakban:
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
Eredeti visszaállítása
Ha valamelyik cella üres, akkor a böngésző nem jeleníti meg a cellát határoló keretet. Ha azt akarjátok, hogy legyen egy üres cellátok, amely körül van keret, akkor a
és
tagek közé helyezzetek el egy kódot.
Táblázat cellabéléssel, és cellatávolsággal (cellspacing) Cellspacing: az egyes cellák közti távolság illetve a szélső cellák és a keret közti távolság pixelekben
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
A kódot módosíthatod az alábbi ablakban:
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
1. sor 1. elem
1. sor 2. elem
1. sor 3. elem
2. sor 1. elem
2. sor 2. elem
2. sor 3. elem
Eredeti visszaállítása
Táblázat felirattal (caption) A táblázat nevét a
tagek között adhatjuk meg. Az hogy a név a táblázat fölött, vagy alatt jelenik meg, az align=top, illetve align=bottom paraméterrel adhatjuk meg.
táblázat neve
1. elem
2. elem
1. elem 2. elem táblázat neve
A kódot módosíthatod az alábbi ablakban:
1. elem
2. elem
táblázat neve
Eredeti visszaállítása
Táblázat elemeinek vízszintes igazítása (align=left|middle|right) Az align=left|middle|right paraméter használatával a cella tartalmát balra, középre vagy jobbra igazíthatjuk. A middle helyett írhatunk center-t is.
cellaelem
cellaelem
cellaelem
bal
közép
jobb
cellaelem cellaelem cellaelem bal
közép
jobb
A kódot módosíthatod az alábbi ablakban:
cellaelem
cellaelem
cellaelem
bal
közép
jobb
Eredeti visszaállítása
Táblázat elemeinek függőleges igazítása (valign=top|middle|bottom) A valign=top|middle|bottom paraméter használatával a cella tartalmát felülre, középre vagy alulra igazíthatjuk. Alapértelmezésben a cellatartalom középre igazodik. A middle helyett írhatunk center-t is.
Az INFO ’9? konferencia rendezői ez évtől Szombathelyen is elindítják az informatika oktatással és érvényesülési ismeretekkel foglakozó konferencia sorozatot.
felül
alul
középre
Az INFO ’9? konferencia rendezői ez évtől Szombathelyen is elindítják az informatika oktatással és érvényesülési ismeretekkel foglakozó konferencia sorozatot.
felül középre alul
A kódot módosíthatod az alábbi ablakban:
Az INFO ’9? konferencia rendezői ez évtől Szombathelyen is elindítják az informatika oktatással és érvényesülési ismeretekkel foglakozó konferencia sorozatot.
felül
alul
középre
Eredeti visszaállítása
Táblázat celláinak összevonása vízszintesen (colspan) Colspan: az adott cella ennyi oszlopot fog elfoglalni
1.1.
1.2.
1.3.
2.1.
2.2-3.
3.1.
3.2.
3.3.
1.1. 1.2. 1.3. 2.1. 2.2-3. 3.1. 3.2. 3.3.
A kódot módosíthatod az alábbi ablakban:
1.1.
1.2.
1.3.
2.1.
2.2-3.
3.1.
3.2.
3.3.
Eredeti visszaállítása
Táblázat celláinak összevonása függőlegesen (rowspan) Rowspan: az adott cella ennyi sor magasságú lesz.
1.-2.1.
1.2.
1.3.
2.2.
2.3.
3.1.
3.2.
3.3.
1.-2.1. 3.1.
A kódot módosíthatod az alábbi ablakban:
1.2. 1.3. 2.2. 2.3. 3.2. 3.3.
1.-2.1.
1.2.
1.3.
2.2.
2.3.
3.1.
3.2.
3.3.
Eredeti visszaállítása
Táblázat szélességének megadása százalékban (width= %) A százalékos megadás során a táblázat szélessége mindig a rendelkezésre álló hely megadott százaléka lesz. Tehát ha az ablak méretét megváltoztatjuk, akkor a táblázat mérete is megváltozik.
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
A kódot módosíthatod az alábbi ablakban:
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
Eredeti visszaállítása
Táblázat szélességének megadása pixelben (width= ) A képpontokban történő megadásnál a táblázat minden ablakméretnél ugyanakkora szélességű lesz.
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
A kódot módosíthatod az alábbi ablakban:
1.1.
1.2.
1.3.
2.1.
2.2.
2.3.
Eredeti visszaállítása
Táblázat háttérszínének megadása (bgcolor=szín|színkód) A háttérszínt a bgcolor paraméterrel definiálhatjuk. pl. bgcolor="lightgreen", vagy bgcolor="#00FFFF".
1.1
1.2
1.3
2.1
2.2
2.3
1.1
1.2
1.3
2.1
2.2
2.3
A kódot módosíthatod az alábbi ablakban:
1.1
1.2
1.3
2.1
2.2
2.3
Eredeti visszaállítása
Ha valamelyik cella üres, akkor a böngésző nem jeleníti meg a cellát határoló keretet, illetve a megadott háttérszín sem érvényesül. Ha azt akarjátok, hogy legyen egy üres cellátok, amely körül van keret, vagy legyen egy adott hátterű üres cellátok, akkor a
és
tagek közé helyezzetek el egy
kódot.
Táblázathoz háttérkép rendelése (background) Ha nem háttérszínt, hanem háttérképet szeretnénk definiálni, akkor azt a background paraméterrel tehetjük meg. A kép formátuma GIF vagy JPG lehet.
1.1
1.2
1.3
2.1
2.2
2.3
1.1
1.2
1.3
2.1
2.2
2.3
A kódot módosíthatod az alábbi ablakban:
1.1
1.2
1.3
2.1
2.2
2.3
Eredeti visszaállítása
Az egyes cellák hátterének megváltoztatása (bgcolor=szín|színkód) Nem csak az egész táblázatra vonatkozóan adhatjuk meg a háttérszínt, hanem az egyes cellák hátterét, vagy háttérszínét is beállíthatjuk..
1.1
1.2
1.3
2.1
2.2
2.3
1.1
1.2
1.3
2.1
2.2
2.3
A kódot módosíthatod az alábbi ablakban:
1.1
1.2
1.3
2.1
2.2
2.3
Eredeti visszaállítása
Az egyes cellák méretének megadása (szélesség, magaság) A cellák szélességét szintén beállíthatjuk a width= paraméter használatával. Használhatjuk a relatív (%-ban megadott), vagy az abszolút (képpontokban megadott) méretmegadási formát is, bár a százalékos megadást nem támogatja a HTML specifikáció. A böngészők többsége azonban helyesen jeleníti meg az oldalt. A táblázat, illetve a cella magasságát definiálhatjuk a height= paraméterrel. (A táblázat magasságát megadhatjuk %-os formában is, de a cellamagasság %-os megadását kerüljük, mert a különböző típusú böngészők más-más eredményt mutatnak)
1.1
1.2
1.3
2.1
2.2
2.3
1.1
1.2
1.3
2.1
2.2
2.3
A kódot módosíthatod az alábbi ablakban:
1.1
1.2
1.3
2.1
2.2
2.3
Eredeti visszaállítása
Az karakter
Alapesetben ha két szó között üres hely van, akkor a böngésző a jobb helykihasználás érdekében a két szót különválaszthatja, tehát elképzelhető, hogy a két szó nem egy sorban jelenik meg. Ha ezt el szeretnénk kerülni, akkor kell az (non-breaking space) jelet alkalmaznunk. Ekkor a böngésző a két szót "egymáshoz ragasztja", vagyis nem fogja szétválasztani a szavakat.
Példa: Vegyünk egy (205 képpont széles) táblázatot és nézzük meg, hogy hogyan tördeli a böngésző a szöveget. ez az alap tördelés
Itt a "bizonyos szavakat" között nem egyszerű üres hely van, hanem kód, ezért a böngésző nem tördeli külön a szavakat. Amint a fentiekben látható volt, az karaktert a táblázatoknál is nagy hasznát vehetjük.
