Obsah
V tomto článku se dozvíte, jak v aplikaci Outlook použít podmíněné formátování na okraje tabulky. Ukážu vám, jak změnit jejich barvu, šířku a styl. Pak vás naučím, jak provést několik úprav najednou a obarvit tabulku v aplikaci Outlook mnoha různými způsoby.
Nejprve bych rád udělal malou poznámku pro nováčky tohoto blogu. Protože dnes budeme mluvit o podmíněném formátování v šablonách, ukážu vám, jak je správně nastavit pomocí doplňku Sdílené šablony e-mailů pro Outlook. Tento nástroj vám pomůže vložit do e-mailů předem uložené dokonale naformátované šablony a smrsknout rutinní korespondenci na několik kliknutí.
Pokud jste již četli můj návod Podmíněné formátování v tabulkách aplikace Outlook, víte, jak změnit obsah buněk a barvu pozadí. To však není vše, co můžete udělat pro oživení tabulky aplikace Outlook. Dnes vám ukážu způsoby, jak podmíněně obarvit okraje tabulky a upravit jejich šířku a styl.
V poslední kapitole na vás navíc čeká malý bonus, kde vám ukážu, jak aplikovat několik úprav najednou, aby byl váš stůl barevný a zářivý jako ohňostroj 4. července ;)
Změna barvy okrajů buněk
Abych vám ukázal, jak funguje obarvení okrajů, použiji stejné ukázky z minulého týdne. Případ je následující: vložím šablonu a zvolím slevovou sazbu, kterou vyplním tabulku. V závislosti na mé volbě se obarví okraje buněk konkrétní barvou.
Dnes budu vybarvovat následující tabulku:
| Ukázka záhlaví 1 | Ukázka záhlaví 2 | Ukázka záhlaví 3 |
| ~%WhatToEnter[ {dataset:'Dataset with discounts', column:'Discount', title:'Select discount'} ] sleva |
Protože podmíněné formátování se zpracovává v kódu HTML šablon, otevřeme nejprve kód HTML této tabulky:
- Otevřete šablonu, která vás zajímá, a stiskněte Upravit :
- Najděte Zobrazit HTML ikona ( ) na panelu nástrojů šablony:
- Podívejte se na původní kód HTML, který bude několikrát upraven:
Pokud vás zajímají barvy a jejich souvislost se slevovými sazbami, napovím vám :) Datová sada! Netušíte, co to je? Pak si udělejte malou pauzu a přečtěte si nejprve můj návod Vyplnitelné šablony Outlooku.
Zde je původní soubor dat, který použiji na začátku a v několika kapitolách ho trochu vylepším:
| Sleva | Barevný kód |
| 10% | #00B0F0 |
| 15% | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
Když potřebuji z této tabulky získat potřebný kód barvy, použiji následující makro:
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]Protože máme všechny základy za sebou, začneme měnit barvy :)
Aktualizace barvy okraje jedné buňky
Chcete-li obarvit okraje jedné buňky v tabulce, najděte nejprve její řádek v HTML šablony a podívejte se blíže na její součásti:
- " styl= " představuje soubor základních parametrů buňky.
- "šířka: 32%; border: 1px solid #aeabab " jsou šířka, barva a styl buňky a rámečku.
- "~%WhatToEnter[] sleva" je obsah buňky.
Tento řádek kódu znamená, že se mi zobrazí buňka s 1px šedými okraji plného stylu. Pokud nahradím některý z těchto parametrů, může to poškodit vzhled tabulky v mé šabloně, tj. okraje budou neviditelné (i když po vložení bude vše vypadat perfektně).
Rád bych měl v šabloně standardní tabulku a při vkládání ji nechal upravit. Přidám tedy jeden nový atribut s parametry, který při vkládání nahradí ty původní:
Prozkoumejme výše uvedený řádek HTML:
- " style="border : 1px solid #aeabab;" je první atribut. To jsou původní vlastnosti buňky.
- " data-set-style= " je speciální parametr, který mi při vkládání pomůže nahradit výše uvedený atribut potřebnou sadou vlastností.
- " border:1px solid; border-color: " je část druhého atributu, u které se pozastavíme. Vidíte, že začátek je totožný s původním, stejná šířka rámečku i styl. Když však dojde na barvu (parametr, který chci změnit), nahradím ji za parametr border-color: a vložte makro WhatToEnter. Proto se v závislosti na volbě v rozevíracím seznamu makro nahradí kódem barvy a okraj se překreslí.
- "~%WhatToEnter[] discount" je stále obsah buňky, který nevyžaduje žádné změny.
Úplné HTML s buňkou v barvě budoucnosti bude tedy vypadat takto:
Po vložení této šablony se okraj aktualizované buňky ihned obarví zvolenou barvou:
Malování okrajů celého řádku
Nyní namalujeme okraje na celý řádek naší ukázkové tabulky a podíváme se, jak to funguje. Logika je naprosto stejná jako v odstavci výše, jen je třeba aktualizovat všechny buňky druhého řádku. Jakmile se na celý řádek aplikují stejné úpravy, které jsem popsal výše, při vkládání šablony se v mžiku namaluje.
Pokud se chcete podívat na hotové HTML s obarvením druhého řádku, zde je:
Změna šířky okraje
Nyní zkusíme aktualizovat nejen barvu rámečku, ale také jeho šířku. Podívejte se ještě jednou na atribut HTML, který při vkládání nahradí původní:
data-set-style="border: 1 px solid; border-color:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]">~%WhatToEnter[{dataset:'Dataset with discounts',column:'Discount',title:'Select discount'}] slevaViz 1px parametr? Jedná se o šířku ohraničení, které má být barevné. Můžete jej ručně změnit například na 2 a po vložení se ohraničení tabulky rozšíří.
Udělám to však jinak. Aktualizuji datovou sadu a přidám nový sloupec s šířkou ohraničení. V tomto případě, jakmile vyberu současnou sazbu, kterou chci vložit, aktualizuje se barva i šířka.
| Sleva | Barevný kód | Šířka okraje |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2.5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3.5 |
Nyní upravme druhý atribut každého řádku a nahraďme jej slovy 1px s následujícím textem:
border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}]Pak to zopakuji pro všechny tři buňky druhého řádku a ve výsledku dostanu následující HTML:
Po uložení a vložení této šablony se v e-mailu zobrazí rozšířené modré okraje:
Úprava stylu ohraničení v tabulce
V této kapitole bych vás rád upozornil na další parametr - styl. Ten se bude starat o vzhled rámečků. Než vám ukážu, jak jej správně aplikovat, budu se muset vrátit ke své datové sadě a upravit ji podle aktuálního případu.
| Sleva | Styl ohraničení |
| 10% | Čárkovaně |
| 15% | Dvojitý |
| 20% | Tečkované |
| 25% | Hřeben |
Každou diskontní sazbu jsem přiřadil ke stylu ohraničení a uložil tuto datovou sadu pro budoucnost. Makro pro načtení stylu pro mé HTML by bylo následující:
~%WhatToEnter[{dataset: "Dataset se slevami",column: "Border style"}]Nyní budu muset aktualizovat atributy druhého řádku nahrazením stylu solid (výchozí styl, který jsem celou dobu používal) výše uvedeným makrem, abych získal následující část kódu:
data-set-style="border: 1px #aeabab; border-style:~%WhatToEnter[{dataset:'Dataset se slevami',column:'Border style'}]Zde je finální HTML:
Pokud tento kód HTML zkopírujete a vložíte do svých šablon, výsledek vás nenechá čekat:
Nastavení podmíněného formátování pro současnou změnu zvýraznění, barvy textu a šířky rámečků.
Dostali jsme se k nejzajímavější části, protože vám ukážu, jak aplikovat více úprav najednou. Nejprve aktualizuji dataset, ze kterého budu získávat data. Protože jsem se rozhodl změnit zvýraznění buněk, barvu textu a šířku okrajů, je třeba všechny tyto parametry zadat. Proto bude můj nový dataset vypadat takto:
| Sleva | Barevný kód | Základní kód | Šířka okraje |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15% | #00B050 | #E2EFD9 | 2.5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3.5 |
Pokud tedy zvolím 10 %, potřebný text bude vybarven modře (# 00B0F0 ), bude pozadí vybraných buněk vystínováno světle modrým tónem (# DEEBF6 ) a jejich hranice se rozšíří dvakrát.
Jak ale tuto datovou sadu propojit s tabulkou Outlooku tak, aby se formátovala? Na tento úkol jsem vás připravoval ve 2 článcích :) Zde je HTML, které zvládne všechny potřebné úpravy:
Nyní se podívejme na všechny použité úpravy:
- Ukázka záhlaví 1 - tento kousek vybarví text záhlaví barvou ze sloupce "Kód barvy". Pokud máte pocit, že si potřebujete osvěžit paměť ohledně malování textu, podívejte se na kapitolu Změna barvy písma textu v tabulce v mém předchozím návodu.
- data-set-style="background-color:~%WhatToEnter[{dataset:'Dataset se slevami',column:'Background code',title:'Vybrat slevu'}] - tato část aktualizuje barvu pozadí, přičemž její kód přebírá z pole Základní kód sloupce datového souboru. Pokud máte pocit, že potřebujete podrobnější popis tohoto případu, neváhejte se podívat na výukový program Zvýraznění buněk.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset se slevami',column:'Border width'}] - s tímto řádkem HTML se šířka okrajů změní na šířku zadanou v poli Šířka okraje Mám to popsané v dřívějších článcích, můžete se podívat, jestli vám něco neuniklo.
Když vložím šablonu s těmito přidanými atributy, výsledek mě nenechá čekat:
Před uzavřením tohoto tématu bych rád uvedl malou poznámku. Při testování podbarvování okrajů v tabulkách jsem se setkal s poměrně nejednoznačným chováním okrajů jak v online, tak v desktopové verzi Outlooku. Protože jsem byl trochu zmatený, obrátil jsem se na naše vývojáře s žádostí o vysvětlení. Ti zjistili, že různí klienti Outlooku vykreslují tabulky různým způsobem a důvodem takového chování je chyba v aplikaciVýhled.
Náš tým tento problém nahlásil týmu společnosti Microsoft, jejich odpověď si můžete prohlédnout v této konverzaci na GitHubu :)
Závěrečná poznámka
Pevně doufám, že se mi podařilo přesvědčit vás, že tabulka v Outlooku není jen černé ohraničení s obyčejným textem. Je tu spousta prostoru pro zlepšení a kreativitu :)
Pokud se rozhodnete pro několik vlastních malířských pokusů, stačí si nainstalovat sdílené e-mailové šablony z obchodu Microsoft Store a užít si je!
Pokud máte ještě nějaké dotazy nebo potřebujete pomoci s podmíněným formátováním v tabulkách aplikace Outlook, stačí zanechat pár slov v sekci Komentáře a my to vyřešíme ;)
