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ó.

Tartalomjegyzék

[szerkesztés] Alapszerkezet

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

[szerkesztés] Paraméterek használata

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

[szerkesztés] Szélesség

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

[szerkesztés] Magasság

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

[szerkesztés] Sorok és oszlopok összekapcsolása

Paraméter neve: colspan
Lehetséges értékek Példa
oszlopok száma 3
Paraméter neve: rowspan
Lehetséges értékek 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

[szerkesztés] Horizontális igazítás

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

[szerkesztés] Vertikális igazítás

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

[szerkesztés] Háttérszín

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

[szerkesztés] Egyirányú vonalazás

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

[szerkesztés] A style paraméter használata

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 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.

[szerkesztés] Szöveg színe

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

[szerkesztés] Keret stílusa

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: none;"
| DDD
|}
DDD

[szerkesztés] Keret vastagsága

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

[szerkesztés] Keret színe

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

[szerkesztés] Keret minden tulajdonsága egyben

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


[szerkesztés] A gyakorlatban

[szerkesztés] Széptáblázat sablon használata

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

[szerkesztés] Kód rövidítése

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

[szerkesztés] Rendezhető táblázat

{|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ű).

[szerkesztés] Táblázat átalakítása kinyithatóvá

[szerkesztés] Első változat

Ahhoz, hogy a táblázat nyitható és csukható legyen, a következő átalakítást végezthetjü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 baloldai 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.

[szerkesztés] Második változat

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.

[szerkesztés] Lásd még

Személyes eszközök

Változók
Műveletek
Navigáció
Részvétel
Nyomtatás/exportálás
Eszközök
Más nyelveken