Způsoby vložení tabulky do chytré šablony

Michal Krejčí

21. září 2023

Chcete-li do chytré šablony v Boldem vložit tabulku, můžete si ji vytvořit v kódu HTML a použít ji prostřednictvím bloku Vlastní HTML. Postup je následující:

V aplikaci klikněte na Šablony.
Vyberte existující chytrou šablonu nebo klikněte na Vytvořit novou šablonu/Vytvořit chytrou šablonu.
Klikněte na ikonu obsahové bloky ᎒᎒᎒ a z levé části přetáhněte blok Vlastní HTML do plátna vpravo.
Klikněte do bloku, aby se vlevo zobrazila možnost k úpravě bloku.

Aby se vám s obsahem bloku lépe pracovalo, doporučujeme si zvětšit zobrazení kliknutím na tlačítko ⛶ Na celou obrazovku.

Zobrazí se výchozí obsah tohoto bloku:

<tr>
	<td>
		<p style="font-family: 'Arial', sans-serif; font-size: 14px;">Klikněte sem a vložte svůj kód HTML. Tagy tr a td doporučujeme ponechat, abyste předešli problémům s formátováním cílových zpráv.</p>
	</td>
</tr>

Základní značky obsahu doporučujeme ponechat vždy tak, jak je uvedeno, tedy měnit pouze obsah mezi značkami <td></td> (v příkladu výše tučně označený obsah). V opačném případě riskujete, že se ve výsledném e-mailu obsah nezobrazí správně.

Dále pokračujte některým z příkladů uvedených níže.

V příkladech níže uvádíme možnost vložení tabulky pomocí HTML značek <table>. Vždy proveďte důkladné testování výsledného e-mailu na co největším množství zařízení a e-mailových prohlížečů. Jen tak budete mít jistotu, že se jim obsah zobrazí správně.

Vložení jednoduché tabulky pomocí značek <table>

Jako příklad si vložíme zcela jednoduchou tabulku reprezentující navigační odkazy pomocí HTML značek <table>:

<tr>
	<td>

     <table style="width:100%; text-align:center;">
        <tr>
            <td style="font-size:20px; font-family:Arial;"><a href="#">O společnosti</a></td>
            <td style="font-size:20px; font-family:Arial;"><a href="#">Služby</a></td>
            <td style="font-size:20px; font-family:Arial;"><a href="#">Ceník</a></td>
            <td style="font-size:20px; font-family:Arial;"><a href="#">Podpora</a></td>
            <td style="font-size:20px; font-family:Arial;"><a href="#">Kontakty</a></td>
        </tr>
    </table>

	</td>
</tr>

V náhledu šablony uvidíme tento obsah:

Důležité je, aby jednotlivé značky <td> obsahovaly definici stylu. V opačném případě se text v nich nezobrazí správně. Rovněž je důležité počítat s tím, že takto vnořená tabulka se nemusí ve všech prohlížečích e-mailových zpráv zobrazit správně. Je proto důležité vždy e-maily důkladně před odesláním otestovat.

Vložení tabulky s obrázkem pomocí značek <table>

Chcete-li vložit složitější tabulku včetně obrázků, musíte nejprve nahrát či připravit obrázky:

Do tabulky můžete použít obrázky, které máte hostovány na vlastním webu, nebo je nahrát do systému Boldem. Pokud použijete obrázky na vlastním webu, připravte si jejich adresy URL. Např. https://www.example.cz/images/fotografie1.jpg
Nemáte-li kde obrázky hostovat, nahrajte je do Boldem. V levé nabídce vyberte Soubory a buď do této obrazovky obrázky přetáhněte myší, nebo klikněte na tlačítko Nahrát soubor z disku a vyberte je ručně.
Po přetažení nebo vložení se obrázky objeví v části Soubory. U jednotlivých obrázků, které budete chtít použít v tabulce, klikněte na nabídku se třemi svislými tečkami ᎒ a vyberte Upravit.
Zobrazí se dialog k přejmenování souboru, kde vás zajímá část Adresa URL souboru.
Na tomto řádku klikněte na ikonu kopírování ⎘.

Zkopírovanou adresu URL si uložte někam v počítači (např. do poznámkového bloku), budete ji potřebovat později při vytváření tabulky.
Postup opakujte pro všechny obrázky, které plánujete do tabulky použít.

Nyní se vraťte do editoru šablon a otevřete svou šablonu, do které jste vložili blok Vlastní HTML. Klikněte do bloku. V levém panelu se zobrazí dialog s kódem HTML. Do tohoto dialogu vložte kód své tabulky, např.:

<tr>
	<td>
    <table style="width:100%; text-align:center;border-collapse: collapse;border: 2px solid #000;">
        <tr>
            <th colspan="2" style="font-size:20px; font-family:Arial;padding: 8px;">Webinář</th>
            <th colspan="1" style="font-size:20px; font-family:Arial;padding: 8px;">Datum</th>
        </tr>
        <tr style="border: 2px solid #000;">
            <td style="font-size:20px; font-family:Arial;font-weight:700;text-align:center;border: 2px solid #000;padding: 8px;"><img src="/files/324141/386f1c3a-d01c-4e59-a565-f291cb1c9c15/fakespeaker3.png" alt="Foto" style="width:200px;border:2px solid;"><br>Eupraxia Nováková</td>
            <td style="font-size:20px; font-family:Arial;text-align:left;border: 2px solid #000;padding: 8px;">
            <h4>Bezpečnost v IT - Aktuální výzvy a řešení</h4><p>Srdečně Vás zveme na exkluzivní online webinář zaměřený na aktuální témata a výzvy v oblasti bezpečnosti v informačních technologiích. V dnešní digitalizované době je otázka kybernetické bezpečnosti klíčová pro každou firmu, bez ohledu na velikost či odvětví.</p>
<h5>
Co Vás čeká:
</h5>
<ul>
    <li>Přehled nejnovějších hrozeb v kyberprostoru</li>
    <li>Doporučené postupy pro zabezpečení Vaší IT infrastruktury</li>
    <li>Diskuze o nejnovějších technologiích a nástrojích pro zvýšení IT bezpečnosti</li>
    <li>Možnost ptát se odborníků na Vaše konkrétní otázky</li>
</ul>

<p>
Těšíme se na Vaši účast a věříme, že odnesete cenné poznatky, které Vám pomohou zabezpečit Vaši firmu proti kybernetickým hrozbám.
</p>
            </td>
            <td style="font-size:20px; font-family:Arial;border: 2px solid #000;padding: 8px;">Online<br>30. září 2023</td>
        </tr>
        <tr style="border: 2px solid #000;">
            <td style="font-size:20px; font-family:Arial;font-weight:700;text-align:center;border: 2px solid #000;padding: 8px;"><img src="/files/324141/93fadc36-7c25-456b-9525-b660dfe65483/fakespeaker1.png" alt="Foto" style="width:200px;border:2px solid;"><br>Raimund Torvald</td>
            <td style="font-size:20px; font-family:Arial;text-align:left;border: 2px solid #000;padding: 8px;">
<h4>Sledování na webových stránkách - Jak efektivně a eticky sbírat data</h4>
<p>Srdečně Vás zveme na exkluzivní online webinář zaměřený na aktuální témata a výzvy v oblasti sledování na webových stránkách. V dnešní digitalizované době je otázka etického a efektivního sběru dat nezbytná pro optimalizaci a porozumění chování vašich návštěvníků.</p>
<h5>
Co Vás čeká:
</h5>
<ul>
    <li>Přehled nejnovějších nástrojů pro sledování na webu</li>
    <li>Metody a postupy pro etický sběr dat</li>
    <li>Diskuze o GDPR a dalších právních aspektech online sledování</li>
    <li>Možnost ptát se odborníků na Vaše konkrétní otázky</li>
</ul>

<p>
Těšíme se na Vaši účast a věříme, že odnesete cenné poznatky, které Vám pomohou lépe rozumět svým návštěvníkům a zároveň respektovat jejich soukromí.
</p>
            </td>
            <td style="font-size:20px; font-family:Arial;">Online<br>3. října 2023</td>
        </tr>
        <tr style="border: 2px solid #000;">
            <td style="font-size:20px; font-family:Arial;font-weight:700;text-align:center;border: 2px solid #000;padding: 8px;"><img src="/files/324141/180cad4c-3d4d-49b5-a0cc-98508914dd01/fakespeaker2.png" alt="Foto" style="width:200px;border:2px solid;"><br>Inocenc Fromage</td>
            <td style="font-size:20px; font-family:Arial;text-align:left;border: 2px solid #000;padding: 8px;">
<h4>Správa sítě - Efektivní strategie a nejnovější nástroje</h4>
<p>Srdečně Vás zveme na exkluzivní online webinář zaměřený na aktuální témata a výzvy v oblasti správy sítě. Ve světě, kde je síťová infrastruktura páteří většiny podniků, je nezbytné rozumět moderním metodám a nástrojům potřebným pro její správu.</p>
<h5>
Co Vás čeká:
</h5>
<ul>
    <li>Nejnovější trendy v oblasti správy sítě</li>
    <li>Automatizace a její role ve správě sítě</li>
    <li>Bezpečnostní postupy a jejich integrace do správy sítě</li>
    <li>Možnost ptát se odborníků na Vaše konkrétní otázky</li>
</ul>

<p>
Těšíme se na Vaši účast a věříme, že odnesete cenné poznatky, které Vám pomohou efektivně spravovat a zabezpečit Vaši síťovou infrastrukturu.
</p>

            </td>
            <td style="font-size:20px; font-family:Arial;">Prezenční<br>12. prosince 2023</td>
        </tr>
    </table>
	</td>
</tr>

V uvedeném příkladu jsme obrázky vložili jako relativní cestu /files/324141/386f1c3a-d01c-4e59-a565-f291cb1c9c15/fakespeaker3.png zkopírovanou z části Soubory.

<img src="/files/324141/386f1c3a-d01c-4e59-a565-f291cb1c9c15/fakespeaker3.png" alt="Foto" style="width:200px;border:2px solid;">

Pokud byste měli obrázky hostovány na svém webu, můžete místo tohoto relativního odkazu použít absolutní cestu:

<img src="https://www.example.cz/images/fotografie1.jpg" alt="Foto" style="width:200px;border:2px solid;">

Výsledkem je následující zobrazení:

Před použitím obsahu v kampani proveďte důkladné testování zobrazení na různých zařízeních a v různých e-mailových prohlížečích!