Přejít na hlavní obsah

WP Table Manager : Styling tabulek

1. Formát

Na panelu nástrojů můžete nastavit styl buňky, například: písmo, velikost písma, styl textu, barvu pozadí buňky, barvu textu, horizontální a vertikální zarovnání buňky, ... Lze jej použít pro jednu buňku nebo více buněk

 

stylový stůl

 

Můžete vybrat procento pro editor tabulky. To znamená, že můžete tabulku přiblížit/oddálit v rozsahu od 50 % do 200 %.

 

zoom-in-out

 

Výšku řádku a šířku sloupce lze definovat v pixelech. Přejděte prosím do nabídky Formát > Použít velikost sloupce/řádku a poté vyberte Změnit velikost sloupce / Změnit velikost řádku . Ve vyskakovacím okně můžete vybrat rozsah a nastavit px pro sloupce nebo řádky. klikněte na Hotovo .

 

změnit velikost sloupce

 

2. Témata a možnosti

V každé tabulce najdete výběru motivu v nabídce Téma. Stačí kliknout na motiv a použít jej.

Použití motivu nahradí všechna data a styl v tabulce. Takže způsob, jak pokračovat, je použít motiv a poté upravit data a vytvořit si vlastní motiv a poté duplikovat tabulky.

 

výběr tématu

Střídejte barvy

Ve stejném Motivu nabídky > Alternativní barvy vám funkce „Automatický styl“ pomůže vybarvit čáru na stole pomocí stylů záhlaví a zápatí . Styly šablon si můžete vybrat nebo si vytvořit vlastní v nastavení pluginu.

 

téma-alter-color

 

Alternativní barvu můžete odstranit kliknutím na možnost „Odebrat >  Odebrat automatický styl“ v nabídce po kliknutí pravým tlačítkem. Poté bude barva po vašem potvrzení vymazána.

 

odstranit-alternovat-barvu

 

Zarovnání tabulky

Zarovnání tabulky je o zarovnání prvku div, který obsahuje celou tabulku, například celou tabulku na střed. Najdete ji v nabídce Formát > Zarovnání tabulky .

 

zarovnání tabulky

Zvýraznění buněk

Volitelně je k dispozici také zvýraznění buňky. Tuto funkci můžete povolit v konfiguraci. Ve výchozím nastavení je zakázáno. Můžete vybrat řádek zvýraznění a upravit barvu a krytí zvýraznění.

 

zvýraznění tabulky

 

3. Přidejte nápovědu k buňkám

Na každé buňce tabulky můžete po kliknutí pravým tlačítkem myši vidět možnost Přidat popisek.

 

add-tooltip

 

Můžete nastavit šířku popisku v pixelech. Dostanete se k tooltipu s editorem, který můžete upravit.

 

tooltip-editor

 

Přidejte obsah a uložte, hotovo, popisek se zobrazí na veřejné straně po najetí myší.

 

tooltip-hover

 

4. Zmrazování řádků a sloupců

Zamrznutí kolony

Zmrazení sloupců je dostupné v nabídce Formát > Možnosti reakce . Můžete zmrazit až 5 sloupců. Počítá se od prvního sl.

 

zmrazovací kolona

 

Chcete-li zmrazit sloupec/řádek, existuje další možnost, která vám umožní opravit výšku stolu (protože kontejner stolu může mít nekonečnou výšku).

 

výška stolu

 

Když vyberete sloupec, který chcete zmrazit, budete moci posouvat tabulku a vždy zobrazit pevný sloupec.

 

zobrazení pevné linky

 

Zmrazení řádků

Najdete jej v Menu Formát > Záhlaví tabulky , odtud můžete zapnout volbu a nastavit zmrazení řádků (až 5 řádků).

 

řádek-zmrazení-tabulky-záhlaví

 

Chcete-li nastavit výšku stolu, vraťte se zpět k možnostem reakce.

Poté bude první řádek na frontendu po nastavení zmrazen.

 

zmrazit řádek

 

5. Řazení a filtry

Pokud chcete tabulku seřadit nebo filtrovat, přejděte na Formát nabídky > Seřadit a filtry .

 

třídit-filtr

 

Poté se objeví vyskakovací okno obsahující možnosti řazení a filtrování. 

 

filtr-sort-popup

 

Pokud chcete seřadit tabulku, jednoduše povolte Frontend řadit . Můžete vybrat sloupec pro výchozí řazení a jeho směr.

Například v tomto případě vyberte sloupec A se ASC .

 

možnosti řazení

 

Existují 2 možnosti filtrování:

 

možnosti filtru

 

  • Uvnitř sloupce: můžete filtrovat data v záhlaví každého sloupce. Přepínací tlačítko vám pomůže zobrazit nebo skrýt vyhledávací pole v záhlaví.

 

filtr-uvnitř-sloupce

 

  • Pokročilý formulář filtru: jakmile je tato možnost vybrána, můžete vyhledávat a filtrovat data v tabulce

 

pokročilý filtr

 

Hlavní vyhledávání: Když tuto funkci povolíte, přidá se do frontendu pole pro zadání vyhledávání. Uživatelé tak mohou snadno prohledávat všechna data v tabulce.

 

hlavní vyhledávání

 

6. Vycpávka buněk a rádius okraje

Na panelu nástrojů najdete ikonu ohraničení, která pomáhá upravit výplň a poloměr ohraničení na buňce.

 

polstrování hranice

 

Všimněte si, že pokud jste použili motiv, některé vlastní CSS budou přidány automaticky. Stále to můžete samozřejmě upravit.

 

7. Vlastní CSS

Pojďme o krok dále. Pokud jste webový designér se dovednostmi css, budete moci přidat css v nabídce Formát > Vlastní CSS.

 

format-custom-css

 

Kód CSS je obarven pomocí zrcadla kódu a lze jej psát méně CSS, funguje to také!

 

custom-table-css

 

Buňky, řádky, sloupce mají souřadnice, které identifikují každou z nich a aplikují na ni vlastní css. R je řádek, C je sloupec.

 

css-zobrazování

 

8. Responzivní tabulky WordPress

Jsou moje tabulky citlivé nebo používají posouvání na malých zařízeních?

Skrytí plk

WP Table Manager zvládá responzivní design s prioritním nástrojem jako volitelnou možností. Ve výchozím nastavení je responzivní funkce zakázána, dojde k přetečení (což ale funguje skvěle na mobilu). Chcete-li použít Hiding Cols , měli byste jít do nabídky Formát > Responzivní možnosti.

 

responzivní úkryt

 

Responzivní režim je pokročilý, můžete definovat prioritu pro skrytí sloupců na mobilních velikostech.
Když jsou sloupce skryté, zobrazí se mobilní nabídka se zaškrtávacím políčkem, které vynutí zobrazení/skrytí sloupců. Velikost sloupce je během edice tabulky pevná. Pokud je velikost všech sloupců pro kontejner příliš velká, budete mít přetečení a budete moci snadno posouvat na mobilních zařízeních.

Tabulka s posuvníkem (lepší pro malé množství sloupců)

 

responzivní tabulkový posuvník

 

Tabulka se skrytým sloupcem (lepší pro velké množství sloupců)

 

57bb0cb0ac948

 

Opakovaná hlavička

Toto je další možnost, pokud chcete vložit tabulku do malé oblasti na vašem webu. Měli byste přejít do nabídky Formát > Responzivní možnosti. Poté vyberte Responzivní typ > Opakované záhlaví.

 

opakovaná hlavička

 

Budou zde možnosti přizpůsobení podle vašeho požadavku:

  • Responzivní bod přerušení (px): Vyberte hodnotu bodu přerušení v pixelech, abyste určili, kdy se tabulka přepne do tohoto responzivního režimu.
  • Responzivní max-height (px): Když je aktivován responzivní režim, v závislosti na hodnotě bodu přerušení definujte max-height, abyste se vyhnuli velmi dlouhé tabulce.
  • Styling v responzivním režimu : Použijte výchozí styl pro tento responzivní režim nebo použijte barvy tabulky

Poté můžete vidět, jak bude tabulka vypadat na frontendu.

 

opakované rozhraní záhlaví

 

Pokud používáte opakované záhlaví a Filtr , můžete filtrovat zadáním do textového pole v mobilním zobrazení.

 

filter-repeed-header

 

9. Export do Excelu

, přejděte do nabídky Tabulka a klikněte na tlačítka Exportovat Excel . Po exportu na frontendu bude typ souboru *.xlsx.

 

export-excel

 

10. Stránkování

Tuto funkci najdete v nabídce Formát > Stránkování v každém vydání tabulky. Pomocí přepínacího tlačítka povolte a vyberte počet řádků, které se mají na stránce zobrazit.

 

stránkování-wptm

 

11. Styl ohraničení buněk

Pro tabulku můžete použít typy ohraničení, jako je šířka ohraničení, barva ohraničení, styl ohraničení. Nejprve vyberte rozsah buněk a poté klikněte na ikonu na panelu nástrojů.

 

hraniční styl

 

12. Vytiskněte tabulku na frontendu

Někdy potřebujete vytisknout tabulku. Chcete-li tedy zobrazit tlačítko Tisk na frontendu, měli byste nejprve přejít do Tabulka nabídek a zaškrtnout tlačítko Tisk.

 

tlačítko tisku