Inkcite 1.18.3

Documentation

Helpers

Table Cell

Make 90’s era tables fun again

Child of the {table} HelperAs 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..

Usage

Example Inkcite markup:

 {table padding=15 mobile="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:

 
<table border=0 cellpadding=15 cellspacing=0 class="fill" style="mso-padding-alt:15px 15px 15px 15px">
  <tr>
    <td align=center class="drop" style="font-size:15px;padding:15px" valign=top>
      ...
    </td>
    <td bgcolor=#336699 class="drop" style="color:#ffffff;padding:15px" valign=top>
      ...
    </td>
  </tr>
</table>

Inkcite’s markup is 48% shorter than conventional HTML.

Attributes

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.
color
Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g. #345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
font
Specifies the named font style corresponding to one or more values set in the helpers.tsv file describing the font.
font-family
Specifies one or more font familes for this element in the order they will be used per CSS standards.
font-size
Specifies the size of the font in pixels for text on or inside of this element.
font-weight
Specifies the font weight for this element’s text either as a weight (e.g. 400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
height
The height of the table, in pixels.
letter-spacing
Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
line-height
Specifies the line height in pixels by default, or if units are provided (e.g. 1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
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.
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.
width
The width of the table, in pixels or as a percentage.

Project Config

Set the default values for all {Table Cell} 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.