0 Kč s DPH

Změny nastavení tabulek v editoru WYSIWYG

07. 06. 2017

V dnešní době přibývá uživatelů, kteří sledují weby přes telefon či tablet, proto je třeba věnovat pozornost responsivnímu vzhledu. Z tohoto důvodu jsme upravili výchozí nastavení tabulek v editoru WYSIWYG a přidali možnost zvolit si přímo v editoru, jakou bude mít vaše tabulka podobu. Předformátovaný styl tabulky zajistí přidání třídy, která v sobě skrývá nastavení ohraničení a případně i pozadí jednotlivých řádků. 

Původní nastavení tabulek vepisovalo buňkám, řádkům i samotné tabulce do kódu pevné šířky i výšky na základě roztahování tabulky v editoru. Problém ale spočíval v responsivním zobrazení. Pokud si uživatel přes vlastní styly CSS nenastavil pevné šířky i pro jednotlivá zobrazení pro telefon nebo tablet (více k responsivnímu zobrazení se dočtete v článku Jak upravit responsivní design), tak tato tabulka přesahovala šířku ostatního obsahu. Předpokladem pro využití následujícího návodu je použití responsivní nebo mobilní šablony na webu. 

Nová výchozí nastavení tabulek

Zásadní změnou je, že se buňkám, řádkům nebo tabulce nenastavují pevné šířky a výšky. Pokud si je tam nastavíte, budou při uložení smazány. Tabulka se přizpůsobí obsahu a díky automaticky přidané třídě .table se roztáhne na 100 % šířky obsahu a nastaví se přívětivé mezery mezi textem a samotnou mřížkou tabulky. 

Pokud si přejete nastavit jednotlivým prvkům tabulky určité šířky, výšky nebo jiné vlastnosti, tuto možnost samozřejmě máte, ale je potřeba tyto vlastnosti vložit pomocí kódu přes Vzhled → Vlastní styly CSS.

Nastavení tříd tabulek přímo v editoru

Dále jsme do editoru WYSIWYG přidali možnost třídu .table odebrat nebo naopak přidat některé z dalších tříd. V článku Předformátovaný styl tabulky jsme vám radili, jak si vybrané třídy přidat přes zdrojový kód. Nyní už nemusíte zobrazovat zdrojový kód a tabulku v něm hledat.  

Stačí kliknout do vytvořené tabulky, poté v panelu nástrojů kliknout na ikonku tabulky a vybrat Vlastnosti tabulky

Nastavení tabulky

 Poslední položkou je třída (Class), kde si můžete třídu, případně kombinaci více tříd, vybrat. 

Vlastnosti tabulky

Třídy tabulky v editoru WYSIWYG

.table

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

.table.table-striped

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

.table.table-bordered

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

.table.table-striped.table-bordered

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

bez třídy

Název týmu 1. kolo 2. kolo 3. kolo 4. kolo
Profíci 20 31 27 34
Amatéři 12 9 14 19
Průměrní 17 22 12 25

 

Několik dalších tříd naleznete v článku Předformátovaný styl tabulky. Ty, které nejsou uvedeny výše, je možné vkládat pouze přes zdrojový kód. 

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.