# Table (Táblázat) widget: felépítés és beállítások

> A Táblázat widget adatforrásai, a fejléc és a törzs felépítése, az extra beállítások, a stílusszakaszok és a korlátozások.

A **Táblázat** (angolul Table) widget az Elementor szerkesztőjében épít táblázatot: specifikációt, árlistát, órarendet vagy összehasonlítást. A cellákba kép, ikon és gomb is kerülhet, a táblázat pedig kereshető, rendezhető és mobilon is használható. A Pro változattal az adatokat CSV-fájlból, Google-táblázatból, űrlapbeküldésekből vagy adatbázis-lekérdezésből is betöltheted.

Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Table** szóra, és kapcsold be a kapcsolóját. A szerkesztőben a widgetpanelen keress rá a **táblázat** szóra, és húzd az oldalra. Első alkalommal egy három oszlopos, három soros mintatáblázat jelenik meg, amit átírhatsz vagy lecserélhetsz.

![Egy kész terméktáblázat a nyilvános oldalon](./kepek/szovegek-adatok-5-tabla-alap.webp)

*Egy kész terméktáblázat a nyilvános oldalon* (https://minta-bolt.hu/tp-tabla-alap/)

A kép a **Táblázat** widget alapértelmezett megjelenését mutatja: fejlécsor, csíkozott törzs és cellahatárok.

## Honnan jönnek az adatok

A forrást a **Tartalom** fül **Táblázat** szakaszának **Tartalomtábla** mezője adja.

![A Táblázat widget Tartalom füle a Tartalomtábla mezővel](./kepek/szovegek-adatok-5-tabla-panel-forras.webp)

*A Táblázat widget Tartalom füle a Tartalomtábla mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=54&action=elementor)

A kép a szerkesztőpanel első szakaszát mutatja: itt választod ki az adatforrást, alatta a **Táblázatfejléc**, a **Táblázat törzse** és az **Extra beállítások** szakasz következik.

| Forrás | Mit csinál | Változat | Részletek |
| --- | --- | --- | --- |
| **Egyéni** | Minden fejléc- és törzscellát te írsz be a szerkesztőben | Ingyenes | Ez a fejezet |
| **CSV-fájl** | Egy URL-ről beolvas egy pontosvesszővel tagolt CSV-fájlt | Pro | [Adatforrások](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-forrasok/) |
| **Google Sheet** | Egy Google-táblázat megadott tartományát olvassa be | Pro | [Adatforrások](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-forrasok/) |
| **Plus űrlap** | A Plus Addons Űrlap widgetjével mentett beküldéseket listázza | Pro | [Adatforrások](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-forrasok/) |
| **SQL-lekérdezés** | SELECT-lekérdezést futtat a WordPress adatbázison, csak rendszergazdák állíthatják be | Pro | [Adatforrások](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-forrasok/) |

Az ingyenes bővítményben a Pro források a nevük mellett **(Pro)** jelzést kapnak, és kiválasztásukkor frissítési figyelmeztetés jelenik meg. Ha egy Pro forrással mentett táblázatot úgy nézel meg, hogy a Pro ki van kapcsolva, az oldalon nem látszik adat.

## Egyéni táblázat felépítése

### Táblázatfejléc

A **Táblázatfejléc** szakasz elemei adják a fejlécsort. Minden sor egy olyan elemmel kezdődik, amelynek **Művelet** mezője **Új sor indítása**. Az utána következő, **Cella tartalma** műveletű elemek az adott sor cellái. Új elemet a **+ Elem hozzáadása** gombbal veszel fel. A fejléc általában egy sor.

Egy fejlécelem három fülön állítható:

- **Tartalom**: a **Szöveg**; Pro esetén az **Eszköztipp** kapcsoló, az **Eszköztipp megjelenítési helye** (**Doboz** vagy **Ikon**) és az **Eszköztipp tartalma**.
- **IKON / KÉP**: ikon vagy kép a fejlécszöveg mellett.
- **Haladó**: oszlopok és sorok átfogása, oszlopszélesség, szín, háttérszín és szövegigazítás az adott cellára.

### Táblázat törzse

A törzs ugyanígy épül: egy **Új sor indítása** elem, majd oszloponként egy **Cella tartalma** elem. Minden sorban ugyanannyi cellát adj meg, mint ahány a fejlécben van.

![A Táblázat törzse szakasz egy megnyitott cellaelemmel](./kepek/szovegek-adatok-5-tabla-panel-cella.webp)

*A Táblázat törzse szakasz egy megnyitott cellaelemmel* (https://minta-bolt.hu/wp-admin/post.php?post=54&action=elementor)

A kép egy megnyitott törzscellát mutat a **Tartalom**, **IKON / KÉP** és **Haladó** füllel; a **Tartalom** fülön a **Szöveg**, a **Link**, a **Gomb** és az **Eszköztipp** kapcsoló áll.

A törzscellák fülei:

- **Tartalom**: **Szöveg**, **Link**, **Gomb** (a **Gomb szövegével**, az **URL/linkkel** és az **Egyéni attribútumokkal**), Pro esetén **Eszköztipp**.
- **IKON / KÉP**: ikon vagy kép a cellában.
- **Haladó**: **Szöveg igazítása**, **Oszlopok átfogása**, **Sorok átfogása** és **Legyen ez a cella táblázatfejléc?**.

Az összehasonlító táblázat, a képek és ikonok, valamint a gombok használatát a [Összehasonlító táblázat, képek és gombok](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-osszehasonlito/) fejezet írja le.

## Extra beállítások

Az **Extra beállítások** szakasz kapcsolói ingyenesek.

![Az Extra beállítások szakasz a Táblázat widgetben](./kepek/szovegek-adatok-5-tabla-panel-extra.webp)

*Az Extra beállítások szakasz a Táblázat widgetben* (https://minta-bolt.hu/wp-admin/post.php?post=54&action=elementor)

A kép az öt extra beállítást mutatja: görgetősáv, kereső, rendezés, bejegyzésszám-választó és mobil megjelenítés.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Táblázat függőleges görgetősávja** | Rögzített magasságú táblázat, belül görgetősávval. A **Magasság (px)** mezővel adod meg a magasságot | Ki, magasság: 100 |
| **Táblázat kereshetősége** | Keresőmező a táblázat fölött; a felirata a **Keresőmező felirata** mezőben állítható | Ki |
| **Táblázat rendezhetősége** | A fejléc kattintásával az oszlop rendezhető | Ki |
| **Bejegyzésszám-választó legördülő menü** | Először 5 sor látszik, és egy „Show 5 / 10 / 15 / All entries” választó jelenik meg | Ki |
| **Reszponzív megjelenítés mobilon** | **Reszponzív megjelenítés húzással** (oldalirányú görgetés) vagy **Reszponzív megjelenítés soronként** (egymás alá rakott sorok) | Húzással |

A három utóbbi kapcsoló részleteit a [Keresés, rendezés, sorok száma és mobil nézet](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/szovegek-adatok-tabla-funkciok/) fejezetben találod.

## Stílusbeállítások

A **Stílus** fülön az alábbi szakaszok vannak.

| Szakasz | Mit állíthatsz |
| --- | --- |
| **Táblázatfejléc** | Igazítás, tipográfia, térköz, sorok szöveg- és háttérszíne, sor- és cellaszegélyek, lebegtetéskori színek |
| **Fejléc reszponzív stílusa mobilon** | Az oszlopnevek megjelenése a soronkénti mobil nézetben |
| **Táblázat törzse** | Igazítás, függőleges igazítás, tipográfia, térköz, **Csíkozás** (alapból be van kapcsolva, két csíkszínnel), szegélyek, lebegtetéskori színek és a gombok stílusa |
| **Ikon- és képbeállítások** | Ikon és kép mérete, pozíciója (**Előtte** / **Utána**), térköze, a képek lekerekítése |
| **Keresősáv és megjelenített bejegyzések** | Feliratok és beviteli mezők színe, tipográfia, térköz, szegély, a keresősáv és a bejegyzésszám-választó szélessége |
| **Görgetősáv** | A függőleges görgetősáv szélessége, csúszkája és sávja |
| **Eszköztipp beállításai** (Pro) | Az eszköztipp tipográfiája, beállításai, stílusa és ikonja |
| **Táblázat beállításai** | Margó, térköz, háttér, szegély, árnyék és túlcsordulás |

## Korlátozások

- Az átfogott cellák (**Oszlopok átfogása** vagy **Sorok átfogása**) nem használhatók együtt a **Táblázat kereshetősége**, a **Táblázat rendezhetősége** és a **Bejegyzésszám-választó legördülő menü** kapcsolóval: a látogató böngészőjében „DataTables warning” felugró ablak jelenik meg, és a funkció nem működik.
- A rendezés szövegként hasonlít, ezért a különböző hosszúságú számok rossz sorrendbe kerülnek (a 119 a 29 elé).
- A cellákban a Font Awesome ikonok olyan osztályokat használnak, amelyeket a widget maga nem tölt be, ezért láthatatlanok lehetnek.
- Az egyes cellákba tehető ikon, kép, gomb és eszköztipp csak az **Egyéni** forrásnál van.