[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/swiftdigital.com.au\/working-with-tables-in-html-email-design\/#Article","mainEntityOfPage":"https:\/\/swiftdigital.com.au\/working-with-tables-in-html-email-design\/","headline":"Working With Tables in HTML Email Design","name":"Working With Tables in HTML Email Design","description":"[vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” bottom_padding=”3%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” id=”features” row_name=”Features” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”left-right” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default”...","datePublished":"2017-07-20","dateModified":"2023-11-16","author":{"@type":"Person","@id":"https:\/\/swiftdigital.com.au\/author\/sw1ft\/#Person","name":"Swift Digital","url":"https:\/\/swiftdigital.com.au\/author\/sw1ft\/","identifier":1,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/d798749f30425bff04d5ff357ac6dba94e073a4a8083725dfb894f9d04f4c5ee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d798749f30425bff04d5ff357ac6dba94e073a4a8083725dfb894f9d04f4c5ee?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"Swift Digital","logo":{"@type":"ImageObject","@id":"https:\/\/swiftdigital.com.au\/wp-content\/uploads\/2023\/05\/logo.png","url":"https:\/\/swiftdigital.com.au\/wp-content\/uploads\/2023\/05\/logo.png","width":300,"height":302}},"image":{"@type":"ImageObject","@id":"https:\/\/swiftdigital.com.au\/wp-content\/uploads\/2017\/07\/windows_SML.jpg","url":"https:\/\/swiftdigital.com.au\/wp-content\/uploads\/2017\/07\/windows_SML.jpg","height":432,"width":600},"url":"https:\/\/swiftdigital.com.au\/working-with-tables-in-html-email-design\/","about":["Email Marketing"],"wordCount":1785,"articleBody":"[vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” bottom_padding=”3%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” id=”features” row_name=”Features” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”left-right” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” centered_text=”true” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” enable_animation=”true” animation=”fade-in” animation_easing=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]Working with tables can seem\u00a0so 90s\u00a0if you\u2019re used to web design, but they\u2019re 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\u2019ve polled the Swift Digital team for their pointers and you\u2019ll be a pro in no time with our top 10 tips for working with tables.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Make them invisible” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Work with the space” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]Many templates have a fixed width, usually in the realm of 600 \u2013 800 pixels. Create tables to perfectly fit the space by adjusting the width property. You can work in pixels or as a percentage \u2013 perfect for when you don\u2019t 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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Align images and wrap text neatly” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Create columns and galleries” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Give your content room to breathe” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]Adjust the cell padding and spacing attributes to add some space between content in adjacent cells.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Get everything lined up” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Change the background colour” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Create instant buttons” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]Set up a cell with a bold background colour, some contrasting text, and a hyperlink, and bam \u2013 you\u2019ve got a button![\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Nest tables within tables” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]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.[\/vc_column_text][divider line_type=”No Line”][vc_custom_heading text=”Add captions and summaries” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Dosis%3A200%2C300%2Cregular%2C500%2C600%2C700%2C800|font_style:400%20regular%3A400%3Anormal”][divider line_type=”No Line”][vc_column_text]Captions and summaries can make your data tables more accessible for those using screen readers. Set this up in the table properties.[\/vc_column_text][divider line_type=”No Line”][vc_column_text]And a bonus tip \u2013\u00a0think 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 \u2013 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![\/vc_column_text][divider line_type=”No Line”][vc_column_text]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. \u00a0Swift Digital can help you create the ideal automation strategy to make your next email marketing campaign a success![\/vc_column_text][divider line_type=”No Line”][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_custom_heading text=”The Preferred Email, Events and SMS Automation Software For All Australian Government Departments” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:300%20light%20regular%3A300%3Anormal”][divider line_type=”No Line”][vc_column_text]Swift Digital\u2019s templates help you effortlessly create stunning emails and events communications using our drag-and-drop email and event builder.You can raise engagement with embedded images, videos, polls, article feedback, and emojis and schedule messages to send at the right time.Government departments’ unique marketing requirements are covered with Swift Digital, and full compliance with all anti-spam and privacy laws is guaranteed. Swift Digital is also ISO 27001 certified.Swift Digital is Australia\u2019s leader in marketing automation software and event management working with organisations like the NSW Government, ATO, and companies like Westpac Bank and Qantas.Find out why we\u2019re the Australian government department\u2019s number one choice for their professional communications and events.To find out how your business can get the best out of Swift Digital\u2019s platform,\u00a0contact our team\u00a0today.Don\u2019t forget to share this post![\/vc_column_text]   Share   Share   Share [\/vc_column][\/vc_row]"},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Working With Tables in HTML Email Design","item":"https:\/\/swiftdigital.com.au\/working-with-tables-in-html-email-design\/#breadcrumbitem"}]}]