WordPress návody

Jak ve WordPress jednoduše vytvářet responzivní tabulky

Autor příspěvku Tomáš Cirkl

WordPress obsahuje skvělý vizuální editor, ve kterém ovšem nejdou dostatečně jednoduše vytvářet tabulky. Přitom tabulky jsou důležitý nástroj umožňující prezentovat a třídit data v dobře pochopitelném formátu. A i když jdou tabulky napsat pomocí HTML a CSS, není to zdaleka ten správný způsob.

V tomto článku si ukážeme jak ve WordPress jednoduše vytvářet responzivní tabulky.

Náhled tabulky

Jak ve WordPress vytvořit tabulku pomocí pluginu

Nejprve si nainstalujte a aktivujte plugin TablePress. Plugin se nachází v oficiálním repozitáři pluginů a lze jej nainstalovat přímo z WordPress administrace. Plugin automaticky obsahuje češtinu.

Jakmile plugin aktivujete, objeví se v levém WordPress menu nová položka TablePress. Běžte do ní a klikněte na Nová tabulka.

Nová tabulka

Napište zde Název tabulky a nastavte kolik bude mít tabulka řádků a sloupců. Toto není nikterak zásadní, všechno můžete pak při plnění tabulky upravovat. Nakonec klikněte na tlačítko Přidat tabulku.

Budete přesměrování do úpravy samostatné tabulky. Tato stránka je rozdělena na několik částí:

  • Informace o tabulce
  • Obsah tabulky
  • Úpravy buněk
  • Možnosti tabulky
  • Vlastnosti knihovny DataTables JavaScript

Jednotlivé bloky popíšu jen okrajově, protože je nastavení kompletně v češtině.

Informace o tabulce

Zde jde změnit jméno tabulky a napsat její popis. Zároveň zde najdete shortcode pro vložení tabulky do obsahu a informaci o poslední úpravě.

Informace o tabulce

Obsah tabulky

Zde zadáváte obsah samotné tabulky. Vždy jen kliknete do daného políčka a napíšete obsah. Pokud chcete zobrazit Rozšířený editor přímo pro políčko klikněte do něj a přitom držte klávesu shift.

Obsah tabulky

Úpravy buněk

Box úpravy buněk je taková nástrojová lišta pro obsah tabulky. Lze zde například přidávat, mazat nebo slučovat buňky.

Úpravy buněk

Možnosti tabulky

Samotné nastavení pro tabulku. Můžete zde například specifikovat, zda má mít tabulka hlavičku nebo jestli se má u tabulky zobrazit i její název.

Možnosti tabulky

Vlastnosti knihovny DataTables JavaScript

Knihovna DataTables JavaScript zajišťuje, že s tabulkou mohou pracovat i uživatelé přímo na stránce. Umožňuje různé druhy třídění, filtrace, vyhledávání nebo stránkování, což se hodí především u větších tabulek.

Vlastnosti knihovny DataTables

Jakmile máte tabulku hotovou, kliknete dole na tlačítko Uložit změny.

Jak vložit tabulku do obsahu

Když máte tabulku připravenou, tak nyní zbývá ji jen vložit do obsahu na stránce. Běžte tedy do stránky, kam chcete tabulku vložit a ve vizuální editoru umístěte kurzor na místo, kde bude tabulka.

V nástrojové liště vizuálního editoru pak klikněte na tlačítko TablePress.

Tlačítko Tablepress

A ze seznamu vyberte tu tabulku, kterou chcete vložit. Nakonec jen klikněte na tlačítko Vložit tabulku.

Seznam tabulek

Do příspěvku se vloží shortcode a máte hotovo.

Případně lze celý postup zkrátit na to, že si shortcode zkopírujete přímo při editaci tabulky a pak jej do obsahu jen vložíte. Nicméně výsledek bude stejný.

Import a export

Do TablePress lze importovat tabulky z formátů CSV, HTML, JSON, XLS a XLSX. Díky tomu nemusíte tabulky překopírovávat do systému, ale lze to udělat během pár sekund.

Importovat tabulku

Zároveň lze již hotové tabulky v TablePress exportovat do formátů CSV, HTML a JSON.

Exportovat tabulku

 

 

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

18 komentářů

  • Tento plugin jsem shodou okolností minulý týden zkoušel, ale bohužel nefunguje české třídění. To znamená znaky s diakritikou a písmeno “ch”. Jde to nějak obejít?

    • Ano, máte pravdu. Protože se jedná o plugin primárně určený pro angličtinu, tak neumí brát takto složené písmeno. Bohužel žádná lehká oprava asi není.

  • Sice uvádějí responzivní, nicméně pokud vložím do buňky obrázek, tabulka se mi na mobilu nepřizpůsobí a jde mimo displej mobilu, alespon tedy u mě. Vyzkoušeno na tabulce která má jen 2 sloupce. Vlevo text a vpravo obrázky.

  • Zdravím, šikovný plugin. Ještě jsem v textu nenašel jak na zarovnávání textu/obrázků v jednotlivých buňkách. Stačí doplnit jednotlivé html tagy, nebo se mýlím? Děkuji

  • Ahoj, tak jsem taky vyzkoušel tenhle plugin. Bohužel se mi nedaří zarovnat tabulku na střed. A to jsem zkoušel vkládat různé CSS styly do nastavení a prostě nic. Asi se to s něčím bije a nechce se to zarovnat. 🙁 Škoda jinak šikovný pomocník.

  • Zdravím, plugin jsem si stáhnul a nainstaloval, ale čeština tam není. Ne, že by to extra vadilo, ale zajímalo by mne, v čem je problém, jestli je třeba ji někde nahrát manuálně? Díky.

  • Dobrý den, umí tenhle plugin (případně jiný) pravidelně aktualizovat tabulku ve WP podle obsahu CSV souboru na disku? Mám seznam lidí exportovaný z win aplikace na ftp a bylo by fajn, kdyby se mi automaticky tabulka aktualizovala, stačilo by 1x denně.

  • Zdravím, nevíte nějaký css kód na změnu velikosti písma v tabulce? Nebo jak jinak písmo v tabulce upravit, aby bylo menší/větší?

  • Dobrý den,
    nevíte někdo, jak zarovnat v jedné tabulce jeden sloupec doleva a druhý doprava?
    Děkuji

    • Ahoj,
      Tablepress si to dělá automaticky podle šířky obsahu. Pokud to chceš určit sám, musíš přes CSS.

  • Dobrý den,

    existuje, prosím, jiný plugin na tvorbu tabulek na starší verze WP? Konkrétně 4.6.6.? Do aktualizace se nechci pouštět, protože neumím zálohovat WP. V případě že bude aktualizace dokončena, co se může stát? Má aktualizace WP vliv na CRM systém?

    • Zdravím,

      určitě doporučuji aktualizovat. Pokud se bojíte, udělejte si předtím kompletní zálohu webu. Nevím jak myslíte vztah na CRM systém.

      • Jsem úplný laik. Jaká je pravděpodobnost, že se tou aktualizací z výše uvedené verze na novou něco stane? No možná se platu, ale v našem případě by měl být WP nějakým způsobem napojen na Blue jet…

        • Toto se bohužel nedá říct nějak obecně, vždy záleží jak je samotný web postaven.

          Pokud je udělán správně, tak by tam k žádné chybě dojít nemělo. Nicméně zaručit to nemůžu.

  • Zdravím, chci se prosím zeptat, používám hodně tabulky, ale teď jsem si všiml, že když dám vyhledat určité slovo co je v tabulce, tak se prostě nenajde. Políčko v nastavení, aby je prohledával zaškrtnuté mám, používám stále WP-Table Reloaded, protože přechod na Table Press se mě nepovedl, tabulky se sice převedly, ale v úplně jiném pořadí a ne všechny. Díky

    • Dobrý den,

      to je řekl bych problém vyhledávače v rámci pluginu. Bohužel mě nenapadá, jak vymyslet lepší řešení, než aktualizaci.

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.