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

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
1
Logo
Coda logo
⁠
https://cdn.coda.io/external/img/coda_logo_tomato_soup.png
⁠
⁠
​
2
Image
Header image alt text here
https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max
​
3
H2
Tables in emails
​
​
4
Table
​
​
​
5
Spacer
​
​
​
6
Paragraph
It’s best to keep the content and column count pretty slim so the table will display alright on mobile.
​
​
7
Spacer
​
​
​
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
1
3/22/2021
MON
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
Office
2
3/24/2021
WED
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
Office
3
3/25/2021
THU
​8:00 AM
​12:00 PM
​12:30 PM
​5:00 PM
Office
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

⁠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta name="x-apple-disable-message-reformatting"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="telephone=no" name="format-detection"> <title>HTML Email Builder - Table Example</title> <!--[if (mso 16)]> <style type="text/css"> a {text-decoration: none;} </style> <![endif]--> <!--[if gte mso 9]> <style>sup { font-size: 100% !important; }</style> <![endif]--> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG></o:AllowPNG> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <style type="text/css"> #outlook a { padding:0; } .es-button { mso-style-priority:100!important; text-decoration:none!important; } a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important; } .es-desk-hidden { float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all; } [data-ogsb] .es-button { border-width:0!important; padding:12px 35px 12px 35px!important; } @media only screen and (max-width:600px) { p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left; margin-bottom:18px } h2 { font-size:26px!important; text-align:left; margin-bottom:16px } h3 { font-size:20px!important; text-align:left; margin-bottom:12px } .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-content-body h2 a, .es-footer-body h2 a { font-size:26px!important } .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-footer table, .es-content, .es-footer { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } p, ul li, ol li { margin-bottom:11px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li { margin-bottom:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li { margin-bottom:9px!important } } </style> </head> <body style="width:100%;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0"> <div class="es-wrapper-color" style="background-color:#F9F9F9;padding:20px;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f9f9f9" origin="0.5, 0" position="0.5, 0"></v:fill> </v:background> <![endif]--> <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#F9F9F9"> <tr> <td valign="top" style="padding:0;Margin:0"> <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:590px;border:1px solid #dddddd;"> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img src="https://cdn.coda.io/external/img/coda_logo_tomato_soup.png" alt="Coda logo" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="68px" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img class="adapt-img" src="https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max" alt="Header image alt text here" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="530px"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <h2 style="Margin:0;line-height:28px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#282F33;margin-bottom:7px"> Tables in emails </h2> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:24px;color:#525252;font-size:16px;margin-bottom:6px"> It’s best to keep the content and column count pretty slim so the table will display alright on mobile. </p> </td> </tr> </table> </td> </tr> </table> </td> </tr> <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:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="es-footer" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-footer-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:590px;border:0;"> <tr> <td align="left" style="Margin:0;padding-left:15px;padding-right:15px;padding-top:20px;padding-bottom:20px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:560px"> <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:18px;color:#B7B7B7;font-size:12px"> This is your footer text! </p></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
⁠
⁠
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.