Skip to content
HTML Email Builder
HTML Email Builder
Examples
Pack Code
Share
Explore

icon picker
Tables

⁠
image.png
⁠
⁠

Subject:
HTML Email Builder - Table Example
⁠
⁠


Email content with a table
Type
Content / Title / Alt Text
Link of Image or Button Destination
HTML
Coda logo
⁠
https://cdn.coda.io/external/img/coda_logo_tomato_soup.png
⁠
⁠
​
Header image alt text here
https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max
​
Tables in emails
​
​
​
​
​
​
​
​
It’s best to keep the content and column count pretty slim so the table will display alright on mobile.
​
​
​
​
​
There are no rows in this table
⁠

Footer Text:
This is your footer text!
⁠
⁠

Note

The “Code” column in the table uses a SwitchIf() formula so added custom items can be substituted in and still have their code read and ordered with the rest of the email content. I use canvas formulas in these examples to create the code, then pull those into the SwitchIf(). Add as many of these as you need if you want to add multiple custom items.

⁠
Send a test to myself
⁠
⁠


Table Layout

Example Table
Date
Day
Time In
Lunch Out
Lunch In
Time Out
Shift Type
3/22/2021
MON
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
3/24/2021
WED
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
3/25/2021
THU
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
There are no rows in this table
⁠

Label List

Formula
Note: This must be a list, not just comma separated text.
⁠
DateDayTime InTime OutShift Type
⁠
⁠

Data Rows

Formula
Note: The .Join("|") is required for the pack to be able to separate the column values for each row.
⁠
3/22/2021|MON|8:00 AM|5:00 PM|Office3/24/2021|WED|8:00 AM|5:00 PM|Office3/25/2021|THU|8:00 AM|5:00 PM|Office
⁠
⁠

Table helper code

Formula
⁠
<tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding-top:15px;padding-bottom:15px;Margin:0;width:530px;"> <table width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;font-size:14px;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;background-color:#EEEEEE;border-radius:7px 7px 0px 0px;" cellpadding="6" role="presentation"> <tr> <th> Date </th> <th> Day </th> <th> Time In </th> <th> Time Out </th> <th> Shift Type </th> </tr> <tr style="border-collapse:collapse;border-bottom:1px solid #DDDDDD;background:#FFFFFF;"> <td style="padding:6px;Margin:0;"> 3/22/2021 </td> <td style="padding:6px;Margin:0;"> MON </td> <td style="padding:6px;Margin:0;"> 8:00 AM </td> <td style="padding:6px;Margin:0;"> 5:00 PM </td> <td style="padding:6px;Margin:0;"> Office </td> </tr> <tr style="border-collapse:collapse;border-bottom:1px solid #DDDDDD;background:#FFFFFF;"> <td style="padding:6px;Margin:0;"> 3/24/2021 </td> <td style="padding:6px;Margin:0;"> WED </td> <td style="padding:6px;Margin:0;"> 8:00 AM </td> <td style="padding:6px;Margin:0;"> 5:00 PM </td> <td style="padding:6px;Margin:0;"> Office </td> </tr> <tr style="border-collapse:collapse;border-bottom:1px solid #DDDDDD;background:#FFFFFF;"> <td style="padding:6px;Margin:0;"> 3/25/2021 </td> <td style="padding:6px;Margin:0;"> THU </td> <td style="padding:6px;Margin:0;"> 8:00 AM </td> <td style="padding:6px;Margin:0;"> 5:00 PM </td> <td style="padding:6px;Margin:0;"> Office </td> </tr> </table> </td> </tr> </table> </td> </tr>
⁠
⁠

Generated Email Code

⁠
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.