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

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

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.

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.