Table
Make 90’s era tables fun again
As you probably already know, <table> s are the necessary and
exceptionally-verbose building blocks of modern HTML emails. Inkcite’s
{table} and {td} helpers simplify building complicated nested tables -
while offering tremendous flexibility and include built-in responsiveness.
With no other parameters, the {table} helper renders a <table> tag with
all of its attributes defaulted to 0 . Similarly, the {td} helper renders
an empty <td> by default.
It’s important to note that Inkcite always starts a new table row whenever
you start a table, saving you keystrokes and keeping your source file clean.
It is common to use lots of single-row tables when layout out your email, but
if you need to add more rows, simply mix-in regular HTML (`</tr><tr>’) where
appropriate.
Responsive Tables
Inkcite Tables support several easy-to-use responsive behaviors:
fill causes the table’s contents to stretch to fill the available space
on mobile devices.
drop causes the table’s columns to stack on mobile devices. Each column
fills the available horizontal space.
stack causes the table’s columns to stack in reverse order on mobile
devices.
fluid causes the table’s cells to stretch horizontally up to a maximum
width on desktops and fluidly fill the available space on mobile.
fluid-drop causes the table’s columns to fluidly drop into a single
column on mobile devices.
fluid-stack causes the tables columns to stack fluidly on mobile devices.
hide causes the table to hide on mobile devices.
Usage
Example Inkcite markup:
{table width=400 padding=15 mobile="fluid-drop"}
{td font-size=15 align=center valign=top}
...
{/td}
{td bgcolor=#369 color=#fff valign=top}
...
{/td}
{/table}
An example of the resulting email HTML output:
<!--[if mso]>
<table border=0 cellpadding=0 cellspacing=0 width=400>
<tr>
<td><![endif]-->
<table border=0 cellpadding=0 cellspacing=0 style="max-width:400px" width=100%>
<tr>
<td style="font-size:0;text-align:center;vertical-align:middle"><!--[if mso]>
<table align=center border=0 cellpadding=0 cellspacing=0 width=100%>
<tr><![endif]-->
<!--[if mso]>
<td valign=top width=0><![endif]-->
<div class="fill" style="display:inline-block;vertical-align:top;width:0">
<table border=0 cellpadding=15 cellspacing=0 width=100%>
<tr>
<td align=center style="font-size:15px;padding:15px" valign=top>
...
</td>
</tr>
</table>
</div>
<!--[if mso]></td>
<![endif]-->
<!--[if mso]>
<td valign=top width=0><![endif]-->
<div class="fill" style="display:inline-block;vertical-align:top;width:0">
<table border=0 cellpadding=15 cellspacing=0 width=100%>
<tr>
<td align=left bgcolor=#336699 style="color:#ffffff;padding:15px;text-align:left" valign=top>
...
</td>
</tr>
</table>
</div>
<!--[if mso]></td>
<![endif]-->
<!--[if mso]></tr>
</table>
<![endif]--></td>
</tr>
</table>
<!--[if mso]></td>
</tr>
</table>
<![endif]-->
Inkcite’s markup is 83% shorter than conventional HTML.
Attributes
- align
- Allows you to align a floating table
left , right or center .
- background
- Specify a background image for this table which works in any email client that supports CSS backgrounds. Consider using
{background} if you want background images that works in all email clients.
- background-gradient
- The background gradient color for this element or
none to disable an inherited gradient
- background-gradient-position
- Controls the position of the background gradient - accepts standard CSS background positions such as
top left , bottom and center . The default depends on the shape of the gradient. radial gradients default to center whereas linear gradients default to the bottom .
- background-gradient-shape
- Controls the shape of the background gradient - either
liner or radial .
- background-position
- If a background image is enabled, specifies the attachment of the image relative to the overall table - e.g.
bottom . When a position is specified, background repeat is disabled by default.
- background-repeat
- If a background image is enabled, specifies whether or not the image repeats. If a position has been specified, repeat defaults to disabled so setting this to
repeat-x , repeat-y or repeat allows you to re-enable the repeating behavior.
- background-size
- Specifies the size of the background (e.g.
cover ) if the default behavior (actual size) is undesirable.
- bgcolor
- Specifies a background color for the entire table.
- border
- Specifies a CSS border that appears on all sides of this element - e.g.
2px solid #445566 . You can also the border for a specific direction on the element using a direction like border-top .
- border-radius
- When a
border is enabled for this element this attribute applies a radius to the border corners, in pixels.
- height
- The height of the table, in pixels.
- margin
- Specifies margin (in pixels) around this element. Supports directional margin (e.g.
margin-left ).
- margin
- Specifies margin (in pixels) around this element. Supports directional margin (e.g.
margin-left ).
- mobile
- Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
- mobile-background
- Specifies an alternate background image for this table on mobile devices. Disable any background image on mobile by specifying
none .
- mobile-background-position
- Specifies the attachment of the background image when the email is viewed on mobile devices.
- mobile-background-repeat
- Specifies the background repeat behavior when the email is viewed on a mobile device.
- mobile-background-size
- Specifies the size of the background image when it is viewed on a mobile device.
- mobile-bgcolor
- Specifies an alternate background color for this table when viewed on a mobile device.
- mobile-border
- Specifies the border for this element when it appears on mobile devices. You may also specify side-specific border such as
mobile-border-top .
- mobile-display
- Allows you to override the CSS
display attribute for this element on mobile devices.
- mobile-height
- When viewed on a mobile device, specifies the height of the table in pixels.
- mobile-max-width
- Specifies the maximum width in pixels of this element when viewed on a mobile device.
- mobile-width
- Specifies the width of the table, in pixels, when viewed on a mobile device.
- padding
- Specifies the padding, in pixels, for all cells within the table. Padding is populate both as attributes on the table and as styles on the cells (including
mso-padding-alt when appropriate) to maximize compatibility.
- shadow
- Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
- shadow-blur
- When
shadow is enabled, overrides the CSS blur default value in pixels.
- shadow-offset
- When
shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
- valign
- Sets the default vertical align for all cells in the table so you don’t need to specify it on each cell individually.
- width
- The width of the table, in pixels or as a percentage.
Project Config
Set the default values for all {Table} Helpers by setting these attributes in helpers.tsv :
outlook-text-shadows
When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.
|