# Táblázat: összehasonlító táblázat, képek és gombok

> Összehasonlító táblázat készítése, cellák összevonása, kép és ikon a cellákban, gomb vagy link a cellában.

Ez a fejezet az **Egyéni** forrású **Táblázat** widgetről szól. Mindhárom funkció az ingyenes bővítményben is működik, csak az **Eszköztipp** kér Pro változatot. A widget bekapcsolását és a szakaszok áttekintését az [alapok fejezet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-alapok/) tartalmazza.

## Összehasonlító táblázat

Az összehasonlító táblázat terveket, termékeket vagy lehetőségeket tesz egymás mellé: fejlécsor, kiemelt első oszlop és több oszlopot átfogó cellák adják.

### A fejlécsor

1. Add hozzá a **Táblázat** widgetet az oldalhoz. A **Tartalomtábla** maradjon **Egyéni**.
2. Nyisd meg a **Táblázatfejléc** szakaszt. Az első elem **Művelet** mezője **Új sor indítása**: minden sor ilyennel kezdődik.
3. Nyisd meg a következő elemet. Ennek a **Művelete** **Cella tartalma**. Írd a **Szöveg** mezőbe az oszlop nevét, például „Funkció”.
4. Minden további oszlophoz vegyél fel új elemet (például „Alap” és „Bővített”).

A fejléccellák **IKON / KÉP** fülén ikont vagy képet tehetsz a szöveg mellé, a **Haladó** fülön az **Oszlopok átfogása**, **Sorok átfogása**, **Oszlopszélesség**, **Szín** és **Háttérszín** mezőket találod. Pro változatban az **Eszköztipp** kapcsoló súgószöveget ad a teljes cellához (**Doboz**) vagy egy kis infóikonhoz (**Ikon**).

### A törzssorok

1. Nyisd meg a **Táblázat törzse** szakaszt. Vegyél fel egy **Új sor indítása** elemet, majd oszloponként egy **Cella tartalma** elemet a **Szöveggel**.
2. Ismételd minden sornál. Minden sorban ugyanannyi cella legyen, mint a fejlécben.
3. Az első oszlop kiemeléséhez nyisd meg az első cellát, a **Haladó** fülön állítsd a **Legyen ez a cella táblázatfejléc?** mezőt **Igen**-re. Ezt minden sor első celláján tedd meg.

![Az összehasonlító táblázat a nyilvános oldalon](./kepek/szovegek-adatok-5-tabla-osszehasonlito.webp)

*Az összehasonlító táblázat a nyilvános oldalon* (https://minta-bolt.hu/tp-tabla-osszehasonlito/)

A kép a kész táblázatot mutatja: az első oszlop cellái fejlécként (`th`) jelennek meg, az utolsó sor pedig a teljes táblázatot átfogja.

### Cellák összevonása

A cella **Haladó** fülén (a fejlécben is) az **Oszlopok átfogása** több oszlopra, a **Sorok átfogása** több sorra nyújtja a cellát. Az alapérték 1.

Ha egy cella átfog másokat, azokat a cellákat hagyd el: egy 3 oszlopot átfogó törzscella a sor egyetlen cellája.

### A beállítások összefoglalva

| Beállítás | Hol van | Mit csinál | Alapérték |
| --- | --- | --- | --- |
| **Művelet** | Minden fejléc- és törzselem | Az **Új sor indítása** sort kezd, a **Cella tartalma** cellát ad a sorhoz | Cella tartalma |
| **Legyen ez a cella táblázatfejléc?** | Törzscella → **Haladó** | **Igen** esetén a cella fejlécként (`th`) jelenik meg | Nem |
| **Oszlopok átfogása** / **Sorok átfogása** | Fejléccella → **Haladó**, törzscella → **Haladó** | Egyesíti a cellát oszlopok vagy sorok között | 1 |
| **Oszlopszélesség** | Fejléccella → **Haladó** | Az oszlop szélessége | nincs |
| **Szín** / **Háttérszín** | Fejléccella → **Haladó** | A fejléccella szövegének és hátterének színe | nincs |
| **Eszköztipp** (Pro) | Fejléc- és törzscellák | Eszköztipp a teljes cellán (**Doboz**) vagy egy ikonon | Ki |

### Korlátozások és hibaelhárítás

- Összevont cella mellett a **Táblázat rendezhetősége**, a **Táblázat kereshetősége** és a **Bejegyzésszám-választó legördülő menü** nem működik: a látogató „DataTables warning: … Incorrect column count” üzenetet kap. Összehasonlító táblázatban, ahol cellákat vonsz össze, tartsd kikapcsolva ezeket az **Extra beállítások** között.
- A fejléc és a törzs elemenként épül; az összehasonlító táblázathoz nincs import, kivéve a Pro **CSV-fájl** és **Google Sheet** forrást.
- Ha az oszlopok eltolódnak, valamelyik sorban több vagy kevesebb a cella, mint a fejlécben, vagy egy összevont cella mellett ott maradtak az általa lefedett cellák. Számold meg a **Cella tartalma** elemeket minden **Új sor indítása** után.

## Képek és ikonok a cellákban

Fejléc- és törzscellába egyaránt tehetsz képet vagy ikont, a cellaszöveg elé vagy után. Készítsd elő a képeket a Médiatárban, és adj nekik címet: a widget ezt használja a kép alt szövegének.

### Kép a cellában

1. Tartsd a **Tartalomtábla** mezőt **Egyéni** értéken.
2. Nyisd meg a **Táblázat törzse** szakaszt, és kattints a kívánt cellaelemre (a **Művelet** **Cella tartalma** legyen).
3. Az elem **IKON / KÉP** fülén állítsd a **Kiválasztás** mezőt **Kép**-re.
4. Kattints a **Kép kiválasztása** gombra, és válaszd ki a képet. A **Képfelbontással** kisebb fájlt tölthetsz be, például bélyegképet.

Fejléccellánál a **Táblázatfejléc** szakasz cellaelemének **IKON / KÉP** fülét használd.

### Ikon a cellában

1. Ugyanezen a fülön állítsd a **Kiválasztás** mezőt **Ikon**-ra.
2. Az **Ikonbetűkészlet** maradjon Font Awesome, és válaszd ki az ikont. Az **Ikon színe** csak az adott ikon színét módosítja.

### Méret és pozíció

A **Stílus** fül **Ikon- és képbeállítások** szakasza a teljes táblázatra érvényes.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Ikon mérete** | Az ikonok mérete | 30 |
| **Ikon pozíciója** | Az ikon a szöveg **Előtte** vagy **Utána** áll | Előtte |
| **Ikon térköze** | Az ikon és a szöveg közti hely | 10 |
| **Képméret** | A képek szélessége pixelben | 30 |
| **Kép pozíciója** | A kép a szöveg **Előtte** vagy **Utána** áll | Előtte |
| **Kép körüli térköz** | A kép és a szöveg közti hely | 10 |
| **Keretsugár** | A képek sarkainak lekerekítése | nincs |

### Tudnivalók

- A képek 30 px szélesen jelennek meg, amíg át nem írod a **Képméretet**, függetlenül a **Képfelbontásnál** választott fájlmérettől.
- A kép címe a Médiatárban a kép alt és title szövege lesz.
- A cellánkénti ikon és kép az **Egyéni** forráshoz tartozik. A **CSV-fájl**, **Google Sheet**, **Plus űrlap** és **SQL-lekérdezés** forrású táblázatban nincs ilyen.
- Az ikonok láthatatlanok lehetnek: a Font Awesome ikonok a régi, 4-es ikonosztályokat használják, és a widget nem tölti be ezt a betűkészletet. Addig nem látszanak, amíg valami más az oldalon be nem tölti. Megbízható megoldás az ikon képként.
- Az **Icon Minds** ikonok a Pro változatot igénylik.
- A méret és a pozíció az egész táblázatra egyszerre érvényes, cellánként nem állítható.
- Ha a kép túl kicsi, növeld a **Képméretet** az **Ikon- és képbeállítások** szakaszban.

## Gomb vagy link a cellában

A törzscellákba gomb is tehető saját szöveggel és linkkel, így minden sor mellett lehet például „Megveszem” gomb.

![Terméktáblázat az utolsó oszlopban soronkénti gombbal](./kepek/szovegek-adatok-5-tabla-gomb.webp)

*Terméktáblázat az utolsó oszlopban soronkénti gombbal* (https://minta-bolt.hu/tp-tabla-gomb/)

A kép a **Rendelés** oszlopot mutatja, ahol minden sorban saját gomb áll.

1. A **Tartalomtábla** legyen **Egyéni**.
2. Nyisd meg a **Táblázat törzse** szakaszt, és kattints a cellaelemre, amelyben a gomb lesz (a **Művelet** **Cella tartalma** legyen).
3. A **Tartalom** fülön kapcsold be a **Gomb** kapcsolót (**Megjelenítés**).
4. A **Gomb szövege** mezőbe írd a feliratot (alapértelmezés: „Click here”), az **URL/link** mezőbe a címet. A mező beállításaiban kérheted az **Új ablakban nyíljon meg** és a **Nofollow** jelölést.

### Egyéni attribútumok

Az **Egyéni attribútumok hozzáadása** kapcsolóval olyan attribútumot adhatsz a gomblinkhez, mint egy nyomkövetési adat.

- Pro változat mellett az attribútumot HTML-ben megszokott módon írd: `data-product="asztali-lampa"`. Az Elementor `kulcs|érték` formája hibás attribútumot eredményez.
- Az ingyenes bővítményben `kulcs|érték` formában, soronként egyet adj meg. Az `onclick`, `id`, `class`, `href` és `style` attribútumot a widget figyelmen kívül hagyja.

### Egy teljes cella linkelése

Ha a cella szövegét akarod kattinthatóvá tenni, gomb helyett a **Tartalom** fül **Link** mezőjét töltsd ki. A link körbeveszi a cella szövegét, és ugyanazokat az új ablak és nofollow beállításokat használja.

### A gombok stílusa

A **Stílus** fül **Táblázat törzse** szakaszában a sorbeállítások alatt találod a gomb beállításait: **Gomb paddingje**, **Gomb szélessége**, tipográfia, szöveg- és háttérszín, szegély és lekerekítés, mindegyikhez lebegtetési állapottal. A stílus a táblázat összes gombjára érvényes.

### Korlátozások

- A **Gomb stílusa** mezőben egyetlen választás van, **Stílus 1**: körvonalas gomb. Pro mellett árnyékot is kap, az ingyenes bővítményben nem.
- Gomb csak az **Egyéni** forrásnál van, a **CSV-fájl**, **Google Sheet**, **Plus űrlap** és **SQL-lekérdezés** forrásnál nem.
- A fejléccelláknak nincs gomb beállításuk.
- Ha az egyéni attribútum nem jelenik meg, ellenőrizd a formátumot a használt változatnál: Pro mellett a `név|érték` nem működik, `név="érték"` formát írj.
- Ha a gomb nem új lapon nyílik, kapcsold be az **URL/link** mező beállításaiban az új ablakban nyitást.