Skip to main content
Working with tables can seem so 90s if you’re used to web design, but they’re still a fundamental aspect of HTML email design. Tables (invisible or not) allow you to create galleries, align content regardless of email client, create columns, buttons, and areas of interest. Tables can seem daunting, but I’ve polled the Swift Digital team for their pointers and you’ll be a pro in no time with our top 10 tips for working with tables.

Make them invisible

Setting the border size to 0 will make the table invisible, allowing you to lay out your content without all those lines breaking things up.

Work with the space

Many templates have a fixed width, usually in the realm of 600 – 800 pixels. Create tables to perfectly fit the space by adjusting the width property. You can work in pixels or as a percentage – perfect for when you don’t know the exact dimensions but you know you want to fill a certain amount of the space. This can be done at both a table and cell level.

Align images and wrap text neatly

Not all email clients are created equal, and thus, not all email clients render HTML in quite the same way. A common point of difference is image alignment. Corralling images with a single cell invisible table solves this problem. Place your cursor next to the text you want the image to line up with, create the table and set the table alignment attribute to left or right as necessary. Your table will stay where you put it and the text will wrap around it.

Create columns and galleries

With an invisible table, you can whip up a two (or three or four!) column layout in no time. Build a grid to create a gallery, perfect for multiple images. Be sure to allow for some space between each image or block of text with cell padding or an empty row or column.

Give your content room to breathe

Adjust the cell padding and spacing attributes to add some space between content in adjacent cells.

Get everything lined up

You can adjust the text alignment on a cell-by-cell basis to get all your content lined up. Edit the cell properties and set the horizontal and vertical alignment attributes.

Change the background colour

Edit the cell properties to set a background colour. Draw the eye by creating areas of interest. Make sure your font colour contrasts well against the cell colour.

Create instant buttons

Set up a cell with a bold background colour, some contrasting text, and a hyperlink, and bam – you’ve got a button!

Nest tables within tables

Built a beautiful layout with a table, but now you need to set out some data? No problem, you can nest tables within tables. Just place your cursor in the appropriate cell of the outer table and create a brand new table as normal.

Add captions and summaries

Captions and summaries can make your data tables more accessible for those using screen readers. Set this up in the table properties.

And a bonus tip – think before you jump. Tables can be incredibly helpful and so much of email design relies on an underlying table structure. You can make use of this in your content to great advantage – with a little forethought. Thinking about the structure of your content and creating a mental (or physical!) wireframe of where everything should sit will take a lot of stress out of table editing. And if you get totally stuck, the friendly support team is always on hand to offer advice!

Email marketing is not a one size fits all technique. It takes proper planning and review in order to be successful and achieve the desired outcomes for your business.  Swift Digital can help you create the ideal automation strategy to make your next email marketing campaign a success!

To find out how your business can get the best out of Swift Digital’s platform, contact our Sales Team today on 1300 878 289.

Leave a Reply