Michal Krejčí
To insert a table into a smart template in Boldem, create it in HTML and add it via the Custom HTML block. The steps are as follows:
- In the app, click Templates.
- Select an existing smart template or click Create new template/Create smart template.
- Click the content blocks icon ᎒᎒᎒ and drag the Custom HTML block from the left onto the canvas on the right.
- Click the block to show the edit option on the left.
To make working with the block content easier, we recommend enlarging the view by clicking the ⛶ Full screen button.
- Displays the default content of this block:
<tr>
<td>
<p style="font-family: 'Arial', sans-serif; font-size: 14px;">Click here and paste your HTML code. We recommend keeping the tr and td tags to avoid formatting issues in target messages.</p>
</td>
</tr>We recommend always leaving the basic content tags as shown and only changing the content between the
Continue with one of the examples below.
The examples below show how to insert a table using HTML <table> tags. Always thoroughly test the final email on as many devices and email apps as possible. That’s the only way to be sure the content displays correctly.
Inserting a simple table using
As an example, we’ll insert a very simple table representing navigation links using HTML
<tr>
<td>
<table style="width:100%; text-align:center;">
<tr>
<td style="font-size:20px; font-family:Arial;"><a href="#">About Us</a></td>
<td style="font-size:20px; font-family:Arial;"><a href="#">Services</a></td>
<td style="font-size:20px; font-family:Arial;"><a href="#">Pricing</a></td>
<td style="font-size:20px; font-family:Arial;"><a href="#">Support</a></td>
<td style="font-size:20px; font-family:Arial;"><a href="#">Contact</a></td>
</tr>
</table>
</td>
</tr>In the template preview you’ll see this content:
It’s important that each
Inserting a table with an image using
To insert a more complex table that includes images, you must first upload or prepare the images:
- You can use images in the table that are hosted on your own website, or upload them to the Boldem system. If you use images hosted on your own website, have their URLs ready. For example https://www.example.cz/images/fotografie1.jpg
- If you don’t have anywhere to host images, upload them to Boldem. In the left menu choose Files and either drag images into this screen or click the Upload file from disk button to select them manually.
- After dragging and dropping or pasting, images will appear in the Files section. For each image you want to use in the table, click the menu with the three vertical dots ᎒ and select Edit.
- The Rename File dialog appears, where you’re interested in the File URL field.
- Click the copy icon ⎘ on this row.
- Save the copied URL somewhere on your computer (e.g., in Notepad); you’ll need it later when creating the table.
- Repeat this process for every image you plan to use in the table.
Now return to the template editor and open the template where you added the Custom HTML block. Click inside the block. A dialog showing the HTML code will appear in the left panel. Paste your table’s code into this dialog, e.g.:
<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;">Webinar</th>
<th colspan="1" style="font-size:20px; font-family:Arial;padding: 8px;">Date</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="Photo" 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>IT Security - Current Challenges and Solutions</h4><p>We cordially invite you to an exclusive online webinar focused on current topics and challenges in information technology security. In today's digital age, cybersecurity is essential for every company, regardless of size or industry.</p>
<h5>
What to expect:
</h5>
<ul>
<li>Overview of the latest cyber threats</li>
<li>Recommended practices to secure your IT infrastructure</li>
<li>Discussion of the latest technologies and tools to improve IT security</li>
<li>Opportunity to ask experts your specific questions</li>
</ul>
<p>
We look forward to your participation and believe you will gain valuable insights to help protect your company against cyber threats.
</p>
</td>
<td style="font-size:20px; font-family:Arial;border: 2px solid #000;padding: 8px;">Online<br>September 30, 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="Photo" 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>Website Tracking - How to Collect Data Effectively and Ethically</h4>
<p>We cordially invite you to an exclusive online webinar focused on current topics and challenges in website tracking. In today's digital age, ethical and effective data collection is essential for optimizing and understanding your visitors' behavior.</p>
<h5>
What to expect:
</h5>
<ul>
<li>Overview of the latest tools for website tracking</li>
<li>Methods and practices for ethical data collection</li>
<li>Discussion of GDPR and other legal aspects of online tracking</li>
<li>Opportunity to ask experts your specific questions</li>
</ul>
<p>
We look forward to your participation and believe you will gain valuable insights to better understand your visitors while respecting their privacy.
</p>
</td>
<td style="font-size:20px; font-family:Arial;">Online<br>October 3, 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="Photo" 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>Network Management - Effective Strategies and the Latest Tools</h4>
<p>We cordially invite you to an exclusive online webinar focused on current topics and challenges in network management. In a world where network infrastructure is the backbone of most businesses, it is essential to understand the modern methods and tools needed to manage it.</p>
<h5>
What to expect:
</h5>
<ul>
<li>The latest trends in network management</li>
<li>Automation and its role in network management</li>
<li>Security practices and their integration into network management</li>
<li>Opportunity to ask experts your specific questions</li>
</ul>
<p>
We look forward to your participation and believe you will gain valuable insights to help you effectively manage and secure your network infrastructure.
</p>
</td>
<td style="font-size:20px; font-family:Arial;">In-person<br>December 12, 2023</td>
</tr>
</table>
</td>
</tr>In the example above, we inserted the images using the relative path /files/324141/386f1c3a-d01c-4e59-a565-f291cb1c9c15/fakespeaker3.png copied from the Files section.
<img src="/files/324141/386f1c3a-d01c-4e59-a565-f291cb1c9c15/fakespeaker3.png" alt="Photo" style="width:200px;border:2px solid;">If your images are hosted on your website, you can use an absolute path instead of this relative link:
<img src="https://www.example.cz/images/fotografie1.jpg" alt="Photo" style="width:200px;border:2px solid;">The result is the following view:
Before using the content in a campaign, thoroughly test how it displays on different devices and in various email apps!
