Az Excel egy bonyolult táblázat, amelyet egy az egyben nem tudunk megjeleníteni a honlapunkon, de az adatokat át tudjuk emelni a TablePress nevű bővítmény segítségével. A cellák Excelben megtett formázása nem marad meg, azt majd újonnan kell beállítanunk, de minden adatot áttehetünk egy honlapon is élő, mobilon is jól olvasható táblázatba. Import helyett magában a bővítményben is készíthetünk új kereshető és szűrhető táblázatokat.

Új táblázat illetve kész táblák szerkesztése:

Új táblázat esetén a Vezérlőpult > TablePress főmenüben az Add New Table almenüpontra kell kattintani. Ezután a táblázat nevét és leírását kell megadni, illetve megadhatjuk, hogy hány sort és oszlopot szeretnénk a táblázatunkba (az alapbeállítás 5×5), ez persze később mind változtatható. Az „add table” gombra kattintva az üres táblázatba kell az adatokat betölteni (formázásról, további sorok, oszlopok beszúrásáról lejjebb található leírás).  

A már korábban elkészült táblázatok szerkesztése szintén a honlapunkon a Vezérlőpult > Eszközök > Table Press  menüpontra kattintva tehető meg, válasszuk ki a táblázat számát vagy nevét, és rákattintva a lejjebb leírt szerkesztő felület lesz látható. A honlapon, ha be vagyunk lépve, akkor a weboldal megtekintése közben a táblázat alján is található egy „Szerkesztés” link, erre kattintva szintén a táblázat saját szerkesztőfelületéhez jutunk.

Excel Tábla Adatainak Importálása:

1. Az Excel fájlt alakítsuk úgy, hogy egy cellában egy adat legyen, lehetnek üres cellák, de ne legyenek egyesített cellák. A táblázat elveszít minden formázást, így azzal nem kell foglalkoznunk. A fájlt elmentjük  „mentés másként” segítségével úgy, hogy a fájlnév alatti lenyitható menüpontból (Fájl típusa) kiválasztjuk a CSV (pontosvesszővel tagolt) formátumot (UTF karakterkódolással), majd az érthetőség kedvéért fájlnévben is jelezzük, hogy „csv” és mentjük a dokumentumot pl. az asztalra.

2. A honlapunkon a Vezérlőpult > Eszközök > TablePress menüpontra kattintunk és ott az Import a Table opciót kell kiválasztanunk. Jelölni kell a lenyíló menüben, hogy a fájl típusa CSV. A számítógépünkről ki kell választani a vonatkozó csv fájlt és kattintani az Import table gombra. A táblázatnak érdemes a későbbiekben is érthető, egyértelmű nevet adni. Minden táblázat kap egy egyedi azonosító számot (id=).

3. Az elkészült táblázat adatai megjelennek nekünk, amelyeket html kódokkal tudunk szerkeszteni, formázni és html kód segítségével tudunk a táblázatba adott esetben képet is illeszteni a kép URL-jével a Médiatárból, vagy egyéb webhelyről.  A cellák látható szerkesztőterülete növelhető, ha a cella jobb alsó sarkán lévő átlós apró vonalakra kattintunk, majd az egér gombját lenyomva tartva jobbra és lefelé húzzuk a cella sarkát.

A feltöltött táblázatnak adhatunk részletes leírást (Description). A későbbiekben a megformázott, elkészült táblázatot egy kód segítségével fogjuk az oldalunkba, vagy bejegyzésünkbe illeszteni, amely kód a táblázat ID számát fogja tartalmazni. Az alábbi képen így: [table id=3 /]. A kód elé és utána is írhatunk szöveget, képet, linket, bármit.

Minden változtatást menteni kell az Save changes gomb segítségével.

Szerkesztési és formázási lehetőségek:

  1. A kijelölt cellába: link beillesztése / kép beillesztése / haladó szerkesztés
  2. A kijelölt sor: duplikálása / fölé egy új sor beszúrása / a sor törlése
  3. A kijelölt sor: feljebb mozgatása / lejjebb mozgatása
  4. A kijelölt sor: elrejtése / mutatása (az elrejtés feloldása)
  5. Megadott számú sor beszúrása a táblázat aljára
  6. A kijelölt cellák összevonása
  7. A kijelölt oszlop: duplikálása / elé egy új oszlop beszúrása / törlése
  8. A kijelölt oszlop: balra mozgatása / jobbra mozgatása
  9.  A kijelölt oszlop: elrejtése / mutatása (az elrejtés feloldása)
  10. Megadott számú oszlop beszúrása a táblázat jobb szélére
További beállítási opciók:

  1. Table Head Row (a táblázat fejléce): The first row of your table is the table header. = az első sor a táblázat címsora – a sor kék színű hátteret kap, a cellákban a betű pedig fehér színűvé válik
  2. Table Foot Row (a táblázat lábléce): The last row of your table is the table footer. = az utolsó sor automatikusan a táblázat lábléce lesz
  3. Alternating row colors (különböző sorszínek): The background colors of consecutive rows shall alternate. = minden második sor halvány szürke lesz
  4. Row Hover Highlighting (sor kiemelése): Highlight a row by changing its background color while the mouse cursor hovers above it = ha az egérrel valamely sorra mutatunk, a sor háttérszíne megváltozik
  5. Print Table Name (a táblázat neve): Show the table name (lenyíló opciók) the table = a táblázat neve a lenyíló menüből kiválasztott helyen jelenjen meg a táblázathoz képest: above = felett, below = alatt
  6. Print Table Description (a táblázat leírása): Show the table description (lenyíló opciók) the table. = a táblázat leírása a lenyíló menüből kiválasztott helyen jelenjen meg a táblázathoz képest: above = felett, below = alatt
  7. Extra CSS Class: (ez további CSS kódolást tesz lehetővé, kérjük, ne használják)

Szűrési, sorbarendezési, stb. beállítások az olvasói felületre:

Érdemes próbálgatni, ellenőrizni, hogy melyik beállítás tűnik a leglogikusabbnak és leginkább felhasználóbarátnak.

  1. Enable Visitor Features: Offer the following functions for sure visitors with this table = A látogatók számára elérhető funkciók ki- és bekapcsolása
  2. Sorting (sorba rendezés): Yes, enable sorting of table data by the visitor. = az olvasó maga rendezheti sorba a táblázatot – kicsi nyilakkal a fejlécben – ehhez jó, ha az első sor fejléc infókat tartalmaz és fejlécnek is jelöljük
  3. Filtering/Search (szűrés, keresés): Yes, enable the visitor to filter or search the table. Only rows with the search word in them are shown. = a látogató szűrhet, kereshet szavakra, csak a beírt szót tartalmazó sorok lesznek majd olvashatóak
  4. Pagination (oldalszámozás):  Yes, enable pagination (showing only a certain number of rows) of the table by the visitor. Show rows of the table ………..per page. = ha ezt bepipáljuk, akkor a nagyon hosszú táblázat, oldalakba rendeződik, amelyek között az olvasó lapozhat. A változtatható számmal az egy oldalon megjelenítendő sorok számát adhatjuk meg
  5. Pagination Length Change (a lapozási hossz változtatása): Yes, allow the visitor to change the number of rows shown when using pagination. = ha ezt bepipáljuk, akkor az olvasó maga állíthatja be, hogy lapozási beállításnál  hány sort akar látni az oldalon, a többi sor oldalakba rendezve, lapozással lesz elérhető – csak akkor használható, ha a lapozás is be van pipálva
  6. Info (információs sor)Enable the table information display, with  information about the currently visible data, like the number of rows. = ha ezt bepipáljuk, akkor a táblázatról szóló információk is láthatóvá válnak