Wikipédia:Táblázatok

A Wikipédiából, a szabad enciklopédiából
(Wikipédia:Hogyan használd a táblázatokat? szócikkből átirányítva)


A táblázatokat a Wikipédiában kétféle módon lehetséges elkészíteni: HTML kóddal, vagy a Wikipedia saját jelölőnyelvével. Azonban szinte mindenhol az utóbbit használjuk, ugyanis ez sokkal rövidebb és átláthatóbb, mint a HTML változat. Ezen az oldalon ennek a jelölőnyelvnek a használatát ismerheted meg.

A különféle színezések használatakor kérjük, vedd figyelembe, hogy enciklopédiát írunk! A fölösleges és rikító színezéseket és keretvastagságokat kerülni kell. Szerkesztői lapon természetesen szabadon alkalmazható.

Alapszerkezet[szerkesztés | forrásszöveg szerkesztése]

Megjegyzés: az alábbi példákban egy sablont, nevezetesen a {{Széptáblázat}}(?) nevűt alkalmazzuk a megértés megkönnyítésére. Részletesebben a sablon használatáról lásd lentebb.

Minden táblázat az alábbi két jel (négy karakter) közé ékelődik:

{|

|}

Magát a táblázatot a következőképpen lehet felépíteni: A |- jelek egy új sort jeleznek. Ezek alatt helyezkednek el annak az adott sornak a cellái (vagyis az oszlopok). A tartalom | jelek után következik.

Íme egy egyszerű példa:

Kód Megjelenés
{|
|-
| AAA
| BBB
|-
| CCC
| DDD
|}
AAA BBB
CCC DDD

Lehetőség van arra is, hogy a táblázatot egy címmel, illetve fejlécekkel lássuk el. Ezeknek igazából csak a formázás szempontjából van értelme. Cím készítése:

|+cím

Fejléc készítése:

!fejléc
Kód Megjelenés
{|
|+cím
!első fejléc
!második fejléc
|-
| AAA
| BBB
|-
| CCC
| DDD
|}
cím
első fejléc második fejléc
AAA BBB
CCC DDD

Paraméterek használata[szerkesztés | forrásszöveg szerkesztése]

Megjegyzés: az alábbi példákban egy sablont, nevezetesen a {{Széptáblázat}}(?) nevűt alkalmazzuk a megértés megkönnyítésére. Részletesebben a sablon használatáról lásd lentebb.

A táblázat minden elemének meg lehet adni egy vagy több paramétert. Ezekkel különféle módosításokat lehet elvégezni a kinézeten. A paraméterek megadása a következőképpen történik:

paraméternév="érték"

Az értéket nem kötelező idézőjelek közé tenni, de általában ajánlott, mert pl. ha az érték szóközt is tartalmaz, akkor a program rosszul értelmezi azt. Két paramétert szóközzel lehet elválasztani egymástól.

A paramétereket az alábbi módokon lehet megadni:

  • a tábla egészére vonatkozólag:
{|paraméternév="érték"
  • sorra vonatkozólag:
|-paraméternév="érték"
  • cellára vonatkozólag:
|paraméternév="érték"| (tartalom)
  • fejlécre vonatkozólag:
!paraméternév="érték"| fejléc
  • táblázatcímre vonatkozólag:
|+paraméternév="érték"| táblacím

Szélesség[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: width
Lehetséges értékek Példa
a felhasználható terület adott százaléka 50%
pixel (képpont) 250px

Megjegyzés: egy cella módosítása az oszlopban lévő összes többi cella szélességét is megváltoztatja.

Kód Megjelenés
{| width="100%"
|-
| AAA
| BBB
|}
AAA BBB
{|
|-
|width="50px"| CCC
|width="100px"| DDD
|}
CCC DDD

Magasság[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: height
Lehetséges értékek Példa
pixel (képpont) 250px

Megjegyzés: csak cellákon alkalmazható, de egy cella módosítása a sorban lévő összes többi cella magasságát is megváltoztatja.

Kód Megjelenés
{|
|-
|height="80px"| AAA
| BBB
|}
AAA BBB

Sorok és oszlopok összekapcsolása[szerkesztés | forrásszöveg szerkesztése]

Több oszlop egyben Paraméter neve: colspan
Maximális érték Példa
oszlopok száma 3
Több sor egyben Paraméter neve: rowspan
Maximális érték Példa
sorok száma 3
Kód Megjelenés
{|
|-
|colspan="2"| AAA
|-
| CCC
| DDD
|}
AAA
CCC DDD
{|
|-
|rowspan="2"| AAA
| BBB
|-
| DDD
|}
AAA BBB
DDD

Horizontális igazítás[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: align
Lehetséges értékek Magyarul
left balra (alapértelmezett)
right jobbra
center középre
justify sorkizárt
Kód Megjelenés
{|width="250px" align="right"
|-
|align="center"| AAA
|align="right"| BBB
|}
AAA BBB

Vertikális igazítás[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: valign
Lehetséges értékek Magyarul
top felülre
middle középre
bottom alulra
baseline minden betű alja (függetlenül méretétől) egy adott vonalra sorakozik fel
Kód Megjelenés
{|
|-
|height="100px" width="100px"| AAA
|valign="top" width="100px"| BBB
|-
|valign="middle" height="100px"| CCC
|valign="bottom"| DDD
|}
AAA BBB
CCC DDD

Háttérszín[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: bgcolor
Lehetséges értékek Példa
# és egy hexadecimális színkód (lista itt) #FF0000
szín angol neve (lista itt) blue
Kód Megjelenés
{| width="100%"
|-bgcolor="Aqua"
| AAA
| BBB
|-
|bgcolor="green"| CCC
|bgcolor="#FF8C00"| DDD
|}
AAA BBB
CCC DDD

Egyirányú vonalazás[szerkesztés | forrásszöveg szerkesztése]

Paraméter neve: rules
Lehetséges értékek Magyarul
rows sorok
cols oszlopok
Kód Megjelenés
{|rules=rows border=1
|-
| AAA
| BBB
|-
| CCC
| DDD
|}
AAA BBB
CCC DDD
{|rules=cols border=1
|-
| AAA
| BBB
|-
| CCC
| DDD
|}
AAA BBB
CCC DDD

A style paraméter használata[szerkesztés | forrásszöveg szerkesztése]

A style paraméter lényege, hogy ún. Cascading Style Sheets (CSS) stílusdefiníciókat adhatunk hozzá a formázandó objektumhoz. Ezek megadása a következőképpen történik:

style="attribútum1: érték1; attribútum2: érték2;"

Az attribútum a módosítandó kívánt formázásnak az angol neve.

Szöveg színe[szerkesztés | forrásszöveg szerkesztése]

Attribútum neve: color
Lehetséges értékek Példa
# és egy hexadecimális színkód (lista itt) #FF0000
szín angol neve (lista itt) blue
Kód Megjelenés
{|
|-
|style="color: red;"| AAA
|style="color: #FF00FF;"| BBB
|}
AAA BBB

Keret stílusa[szerkesztés | forrásszöveg szerkesztése]

Attribútum neve: border-style
Lehetséges értékek Magyarul
none nincs keret
solid sima vonal
dotted pontokból álló vonal
dashed szaggatott vonal
double dupla vonal
groove 3D behúzott
ridge 3D kihúzott
inset 3D benyomott
outset 3D kiemelt
Kód Megjelenés
{|style="border-style: dotted;"
| AAA
|}
AAA
{|style="border-style: dashed;"
| BBB
|}
BBB
{|style="border-style: double;"
| CCC
|}
CCC
{|style="border-style: solid;"
| DDD
|}
DDD

Keret vastagsága[szerkesztés | forrásszöveg szerkesztése]

Attribútum neve: border-width
Lehetséges értékek Példa
3 előre meghatározott vastagság thin (vékony), medium (közepes), thick (vastag)
pixel (képpont) 5px

Fontos: a megfelelő működéshez a border-style attribútumot is meg kell adni.

Kód Megjelenés
{|style="border-style: solid; border-width: thin;"
| AAA
|}
AAA
{|style="border-style: solid; border-width: 5px;"
| BBB
|}
BBB

Keret színe[szerkesztés | forrásszöveg szerkesztése]

Attribútum neve: border-color
Lehetséges értékek Példa
# és egy hexadecimális színkód (lista itt) #FF0000
szín angol neve (lista itt) blue

Fontos: a megfelelő működéshez a border-style attribútumot is meg kell adni.

Kód Megjelenés
{|style="border-style: solid; border-color: SteelBlue;"
| AAA
|}
AAA
{|style="border-style: solid; border-color: #2E8B57;"
| BBB
|}
BBB

Keret minden tulajdonsága egyben[szerkesztés | forrásszöveg szerkesztése]

Attribútum neve: border
Ez az attribútum egyszerre 3 értéket fogad el, melyeket a következő sorrendben kell megadni:
1. border-width (vastagság)
2. border-style (stílus)
3. border-color (szín)
Kód Megjelenés
{|style="border:thick inset Magenta;"
| AAA
|}
AAA
{|style="border:5px outset #000080;"
| BBB
|}
BBB


A gyakorlatban[szerkesztés | forrásszöveg szerkesztése]

Széptáblázat sablon használata[szerkesztés | forrásszöveg szerkesztése]

A táblázat első sorában használhatjuk a {{Széptáblázat}}(?) sablont, s ekkor egységesek lesznek a táblázataink.

{| {{széptáblázat}}
! oszlop fejléc 1
! oszlop fejléc 2
|-
| 1. sor, 1. oszlop 
| 1. sor, 2. oszlop
|- 
| 2. sor, 1. oszlop
| 2. sor, 2. oszlop
|}
oszlop fejléc 1 oszlop fejléc 2
1. sor, 1. oszlop 1. sor, 2. oszlop
2. sor, 1. oszlop 2. sor, 2. oszlop

Kód rövidítése[szerkesztés | forrásszöveg szerkesztése]

Kód Megjelenés
{|
|-
|AAA||BBB||CCC
|}
AAA BBB CCC

Rendezhető táblázat[szerkesztés | forrásszöveg szerkesztése]

{|class="sortable" border="1" style="width:50%; background:FloralWhite; border: solid 0.5px; "
!colspan=2|demo1
|-
|| 9 || kilenc
|-
||11 || tizenegy
|-
||12 || tizenkettő
|-
||1 || egy
|}
demo1
9 kilenc
11 tizenegy
12 tizenkettő
1 egy
{|class="sortable" border="1" style="width:50%; background:FloralWhite; border: solid 0.5px; "
|+ demo2
!|számokkal||betűvel
|-
|| 9 || kilenc
|-
||11 || tizenegy
|-
||12 || tizenkettő
|-
||1 || egy
|}
demo2
számokkal betűvel
9 kilenc
11 tizenegy
12 tizenkettő
1 egy

Ha a számok mögé valamilyen egyéb jel vagy betű kerül (pl. lábjegyzet miatt), a rendezés nem fog megfelelően működni, mert a program figyelmen kívül hagyja a helyi értéket (a 100, 200, 1000 sorozat pl. 100, 1000, 200 formában lesz rendezve, mivel az 1 megelőzi a 2-est). Ha az adott egyéb jelet, betűt nem akarjuk eltávolítani, akkor a <font color=white>0</font> megoldással láthatatlan 0-kat tehetünk a számok elé, hogy mindegyik ugyanannyi jegyből álljon, így a sima betűrendes rendezés is a számértéknek megfelelő sorrendet fog kiadni.

Ha az oszlop némelyik cellájában a szám helyén valami egyéb jel szerepel (pl. kihúzás, kérdőjel), és azt szeretnénk, ha ezek a legkisebb értékű szám mögött állnának, akkor olyan karaktert tehetünk be ezek elé láthatatlanul (fehér színnel), amelynek kódja kisebb a 0-énál (l. ASCII). Tekintve, hogy számokról van szó, érdemes ilyenkor # számjelet tenni ezek elé, s egyúttal ez az egyik legalacsonyabb kódszámú karakter is.

További lehetőségekért lásd a m:Help:Sorting lapot (angol nyelvű).

Táblázat átalakítása kinyithatóvá[szerkesztés | forrásszöveg szerkesztése]

Első változat[szerkesztés | forrásszöveg szerkesztése]

Ahhoz, hogy a táblázat nyitható és csukható legyen, a következő átalakítást végezhetjük el a nagyméretű táblázatokon:

1. Az eddigi táblázat elé kerül:

<div style="clear:both;" class="NavFrame">
<div class="NavHead"><small>A táblázat a jobb oldali szövegre kattintva nyitható/csukható</small></div>
<div class="NavContent">

A <small></small> közötti szöveg tetszőlegesen változtatható, akár a <small></small> is elhagyható. Ekkor normál betűméretben látható a beírt szöveg.

2. A táblázatban megszűnik az eddigi címsor, tehát nincs már „|+”

3. A kinyitható táblázat lezárása következik ezután:

</div>
</div>

Példák kinyitható táblázatra a →ebben a cikkben találhatóak.

Második változat[szerkesztés | forrásszöveg szerkesztése]

Ha a szócikkünkben található ! jellel készített fejrész, akkor a táblázatba egyszerűen be lehet illesztenünk a "collapsible" CSS-osztályt, az alábbi módon:

{|class="collapsible" border="1" width="300"
! Nyitható és csukható táblázat
|-
| táblázat tartalma
|}
Nyitható és csukható táblázat
táblázat tartalma
  • Ha alaphelyzetben zárt táblázatot szeretnél, akkor a classhoz írd ezt: "collapsible collapsed".
  • Szebb táblázat érhető el, ha a "toccolours collapsible" osztályt használod.

Lásd még[szerkesztés | forrásszöveg szerkesztése]