# Táblázat widget

> Táblázat sorokkal, oszlopokkal, összevont cellákkal, rendezéssel, kereséssel, CSV-importtal és stílusbeállításokkal.

A **Táblázat** widgettel tetszőleges számú sorból és oszlopból álló táblázatot készíthetsz. Jó termékek vagy adatok összehasonlítására, órarendhez, változásnaplóhoz és sok másra. A táblázat rendezhető és kereshető lehet, hosszú táblázatnál pedig bejegyzésszám-választó is megjelenhet.

Ha a widget nem látszik a szerkesztőben, kapcsold be a bővítmény **Widgetek** beállításainál.

A táblázat a mobilon is használható: kisebb képernyőn vízszintes görgetősávot kap, és ezzel lapozhatsz benne. A régi, oszlopokat egymás alá rendező reszponzív elrendezés már nem használható.

## A táblázat felépítése

A **Tartalom** fülön három szakasz alakítja a táblázatot:

- **Táblázatfejléc**: a felső sor vagy sorok, amelyek az oszlopokat nevezik meg;
- **Táblázat tartalma**: a táblázat törzse;
- **Haladó beállítások**: rendezés, keresés és bejegyzésszám-választó.

![A Táblázatfejléc szakasz a mintatáblázat celláival](./kepek/tartalom-tablazat-fejlec.webp)

*A Táblázatfejléc szakasz a mintatáblázat celláival* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen a **Táblázatfejléc** listája látszik: egy `row` sor és három `cell` elem.

A fejléc és a tartalom is **cellák** listájából áll, és minden cellának van egy **Művelet** beállítása. A táblázat alakját ezek a műveletek határozzák meg.

### Sorok és oszlopok hozzáadása

Új sor:

1. Kattints az **Elem hozzáadása** gombra a **Táblázatfejléc** vagy a **Táblázat tartalma** szakaszban. Új cellaelem jelenik meg.
2. Nyisd ki az új elemet, és a **Művelet** listából válaszd az **Új sor indítása** értéket. Ez üres sort kezd a táblázatban.
3. A sor addig nem látszik, amíg nem adsz hozzá oszlopot.

Új oszlop (cella):

1. Kattints az **Elem hozzáadása** gombra.
2. Nyisd ki az elemet, és a **Művelet** listából válaszd az **Új cella hozzáadása** értéket (ez az alapérték). Ez új oszlopot ad az előző sorhoz.
3. Írj szöveget a cellába, és a táblázatban azonnal megjelenik.
4. Annyi oszlopod lesz, ahány cellát hozzáadsz a sorhoz. Az **Elem hozzáadása** gomb a cellákat vízszintesen, egymás után fűzi.

Újabb sorhoz kezdj ismét az **Új sor indítása** művelettel.

A sor- és oszlopszerkezet átrendezéséhez fogd meg a cellaelemet a bal szélén lévő három pontnál, és húzd az új helyére. A másolat ikonnal megkettőzheted a cellát, az **X** ikonnal törölheted.

## Cella beállításai

Egy cella kinyitva három fület kínál: **Tartalom**, **Ikon / Kép** és **Haladó**.

![A Címsor 1 cella kinyitva, a Tartalom fülön](./kepek/tartalom-tablazat-cella.webp)

*A Címsor 1 cella kinyitva, a Tartalom fülön* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen a **Művelet** lista és a három fül látszik, alatta a cella **Szöveg** mezője.

### Fejléc cella

| Fül | Beállítások |
|---|---|
| **Tartalom** | A **Szöveg** az oszlop címe. Ha például két eszközt hasonlítasz össze, az egyik oszlopba az egyik, a másikba a másik neve kerül. |
| **Ikon / Kép** | Ikon vagy kép a fejlécben, szöveggel együtt vagy szöveg nélkül. Összehasonlító táblázatnál például elég a két termék logója. |
| **Haladó** | **Oszlopok átfogása**, **Sorok átfogása**, **Oszlopszélesség**, **Szín** és **Háttérszín** az adott cellához. |

### Tartalom cella

A **Táblázat tartalma** celláiba szöveg, szám, HTML vagy különleges karakter, kép és ikon is kerülhet.

| Fül | Beállítások |
|---|---|
| **Tartalom** | A **Szöveg** lehet szöveg, szám, HTML vagy különleges karakter. Gombot például HTML-kóddal adhatsz hozzá: `<button>Kattints ide</button>`. A **Link** mezőbe írt webcímmel a cella tartalma hivatkozássá válik. |
| **Ikon / Kép** | Ikon a listából vagy kép, szöveggel vagy anélkül. Két termék logóját például így teheted a táblázatba. |
| **Haladó** | **Oszlopok átfogása**, **Sorok átfogása**, **Oszlopszélesség**, **Szín**, **Háttérszín**, és az **Átalakítod ezt a cellát a táblázat címsorává?** kapcsoló. |

Az **Átalakítod ezt a cellát a táblázat címsorává?** kapcsoló a cellát fejléccellává teszi, ezért felveszi a **Táblázatfejléc** stílusát. Ezzel készíthetsz függőleges fejlécet is.

![A Címsor 1 cella Haladó füle](./kepek/tartalom-tablazat-cella-halado.webp)

*A Címsor 1 cella Haladó füle* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen a **Haladó** fül **Oszlopok átfogása**, **Sorok átfogása**, **Oszlopszélesség**, **Szín** és **Háttérszín** mezői láthatók.

### Egyedi oszlopszélesség

Alapból az oszlopok szélessége automatikus, vagyis egyforma szélesek. Ha saját szélességet akarsz, add meg az **Oszlopszélesség** értékét a **Táblázatfejléc** celláinak **Haladó** fülén. A megadott szélességet az oszlop alatti összes cella átveszi, ezért a tartalomcelláknál nem kell külön beállítani.

### Képek mérete a táblázatban

A képek és ikonok méretét a **Stílus** fül **Ikon / kép** szakasza állítja, az összes képcellára egyszerre. Cellánkénti képméret nincs. Az itt elérhető beállítások:

- **Méretezés**: a kép szélessége képpontban (alapérték 30 px, 1 és 500 px között);
- **Kép pozíciója**: a kép a cella szövege előtt vagy után jelenik meg;
- **Kép körüli térköz**: a kép és a szöveg közti rés;
- **Keretsugár**: a kép sarkainak lekerekítése.

Ha az egyes cellákban eltérő képméret kell, az egyedi CSS-t igényel.

## Cellák összevonása

Ha több sort vagy oszlopot egyetlen cellában akarsz megjeleníteni, a cella **Haladó** fülén add meg, hány oszlopot vagy sort fogjon át. Az **Oszlopok átfogása** és a **Sorok átfogása** alapértéke 1. Annyit írj be, ahány oszlop vagy sor kell az összevont cellába.

Ha például az aktuális cella két oszlopot kapjon, az **Oszlopok átfogása** értéke legyen 2.

## Rendezhető és kereshető táblázat

A **Haladó beállítások** szakasz három kapcsolót kínál, amelyek a látogatónak könnyítik meg a nagy táblázat használatát.

![A Haladó beállítások szakasz](./kepek/tartalom-tablazat-halado-beallitasok.webp)

*A Haladó beállítások szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen mindhárom kapcsoló kikapcsolt állapotban látszik, alattuk a rövid leírásukkal.

| Beállítás | Mit csinál |
|---|---|
| **Rendezhető táblázat** | Nyilak jelennek meg minden oszlopfejlécen, és a látogató az oszlopfejlécre kattintva rendezheti a sorokat. |
| **Kereshető táblázat** | A táblázat fölött keresőmező jelenik meg. A látogató beírja a keresett szöveget, és csak a találatot tartalmazó sorok maradnak látszatban. |
| **Bejegyzésszám legördülő menü** | A látogató kiválaszthatja, hány sor jelenjen meg egyszerre. Hosszú táblázatnál hasznos. |

A keresőmező és a bejegyzésszám-választó kinézetét a **Stílus** fülön, a **Keresés / bejegyzések megjelenítése** szakaszban alakíthatod: szín, háttér, tipográfia, szegély, szélesség és belső margó állítható.

A **Reszponzív támogatás** kapcsolót figyelmeztetés kíséri: ha be van kapcsolva, a haladó beállítások nem működnek. A **Rögzített fejléc** kapcsolóval a fejléc görgetéskor a helyén marad.

## Táblázat készítése CSV-fájlból

A táblázatot CSV-fájlból is felépítheted. A CSV olyan egyszerű szövegfájl, amelyben az értékeket vessző választja el.

1. A **Tartalom** fül **Táblázatfejléc** szakaszában a **Forrás** listából válaszd a **CSV-fájl** értéket.
2. Kattints a **Tölts fel egy CSV-fájlt** alatti mezőre.
3. Töltsd fel a fájlt a médiafeltöltővel.
4. Kattints a **Média beszúrása** gombra.
5. A táblázat a fájl alapján azonnal felépül.

A feltöltött CSV nem kerül be a médiatárba, mert az Elementor nem támogatja ennek a fájltípusnak a feltöltését. Ezért ha újabb CSV-ből akarsz táblázatot, a fájlt újra fel kell töltened.

A CSV-ből épített táblázatot is lehet rendezhetővé és kereshetővé tenni, és a **Stílus** fülön ugyanúgy alakítható.

### Hibák a CSV-importnál

Kétféle hiba fordulhat elő, ezért előbb azonosítsd, melyiket látod.

**„File could not be opened” üzenet (a fájl nem nyitható meg).** Ez kiszolgálóoldali fájlhozzáférési hiba: a bővítmény megtalálja a feltöltött fájlt, de a webkiszolgáló nem olvashatja. Nem a CSV tartalmával van baj. Ellenőrizd sorban:

1. A CSV-t a widget feltöltőmezőjén át, a WordPress médiafeltöltőjével töltsd fel. Külső webcím vagy a feltöltési mappán kívüli fájl nem működik.
2. A fájl kiterjesztése kisbetűs `.csv` legyen. A bővítmény megnézi a kiterjesztést, ezért az `adat.CSV` vagy az `adat.txt` nem fogadható el akkor sem, ha a tartalma jó. Nevezd át a fájlt, és töltsd fel újra.
3. A fájl a `wp-content/uploads/` mappában legyen olvasható a kiszolgáló számára. Egyes megosztott vagy menedzselt tárhelyeken ez szigorú jogosultságú lehet. Kérd meg a tárhelyszolgáltatót, hogy erősítse meg az olvashatóságot, vagy ha van szerverhozzáférésed, nézd meg, hogy a fájl jogosultsága legalább 644.
4. Töltsd fel újra a fájlt: egy megszakadt feltöltés sérült fájlt hagyhat. Töröld a médiatárból, és tölts fel egy újat.

Ha ezek után is fennáll a hiba, a támogatásnak add meg a tárhelyszolgáltató nevét, a WordPress, a bővítmény és az Elementor verzióját, és egy képernyőképet a hibáról a weboldalon.

**Rosszul formázott CSV.** Hiányzó vagy összekeveredett adatot okoz. A fájlt az alábbiak szerint exportáld.

- **Mac, Numbers:** nyisd meg a fájlt, majd **File → Export To → CSV**. Az exportbeállításoknál vedd ki a pipát az **Include table names** (táblanevek) elől, és a szövegkódolás legyen **Unicode (UTF-8)**.
- **Windows, Excel:** a felső sávban kattints az **Adatok** menüre, majd a **Szövegből** ikonra. Keresd meg a fájlt, és kattints az **Importálás** gombra. A Szövegimportáló varázsló első lépésénél a fájl eredetének válaszd a **65001: Unicode (UTF-8)** értéket, és kattints a **Tovább** gombra. A második lépésnél a határolójel a **vessző** legyen, majd **Tovább**. A harmadiknál az oszlopformátum **Általános**, és kattints a **Befejezés** gombra.
- **Google Táblázatok (ez a legbiztosabb):** működik régi fájlokkal is. Importáld a régi fájlt a **Fájl → Importálás** menüvel, majd töltsd le újra: **Fájl → Letöltés → Vesszővel elválasztott értékek (.csv, aktuális lap)**. Olyan CSV-t is újra beimportálhatsz a Táblázatokba, amely nem működik, majd letöltheted és feltöltheted a widgetbe.

Az exportálás után töltsd fel a fájlt a fenti lépésekkel.

## Stílus

A **Stílus** fülön négy szakasz van:

![A Stílus fül Táblázatfejléc szakasza](./kepek/tartalom-tablazat-stilus.webp)

*A Stílus fül Táblázatfejléc szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=26&action=elementor)

A képen a **Táblázatfejléc** szakasz van nyitva, alatta a többi szakasz címe.

| Szakasz | Mit állít |
|---|---|
| **Táblázatfejléc** | A felső sor kinézetét: tipográfia, belső margó, szöveg igazítása, a sor szövegének és hátterének színe (alapértelmezett és rámutatás állapotban), szegély. A cellák saját **Szín** és **Háttérszín** értéke a **Táblázatfejléc** cellájának **Haladó** fülén állítható, és felülírja ezt. A fejléccellává alakított tartalomcella is ezt a stílust kapja. |
| **Táblázat törzse** | A tartalom kinézetét. A páratlan és a páros sorok külön színt kaphatnak, és az egérrel érintett sor is. |
| **Ikon / kép** | Az ikonok és képek pozíciója, mérete és távolsága. A fejlécre és a tartalomra egyaránt vonatkozik. |
| **Keresés / bejegyzések megjelenítése** | A keresőmező és a bejegyzésszám-választó kinézete, amelyek a **Haladó beállítások** bekapcsolása után jelennek meg. |