×

Hupspot HTML Email Table Guide

/ CRM, Hubspot / By

How to Build an HTML Email Table Layout in Hubspot

Creating a reliable HTML email table layout for Hubspot campaigns requires a different mindset than coding for modern websites. Email clients often use outdated rendering engines, which means you must rely on simple table structures, inline styles, and careful testing to ensure your designs look consistent everywhere.

This guide walks through the core principles, recommended structure, and practical steps to build table-based HTML email layouts that work smoothly with Hubspot and other email tools.

Why HTML Email Still Depends on Tables in Hubspot

Most website layouts today use flexbox or CSS grid, but email clients lag behind. When building templates for Hubspot, tables are still the most predictable choice for layout.

Using table markup for layout helps you:

  • Control alignment and spacing across legacy email clients.
  • Prevent unexpected stacking or broken columns in popular inboxes.
  • Create predictable structures that Hubspot’s editor can work with.

To see a classic example of table-based email code, review the original source at this HTML email table article.

Core HTML Email Table Structure for Hubspot

Start with a simple, centered container table. This will serve as the foundation for your email layout in Hubspot.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Your Email Title</title>
  </head>
  <body style="margin:0; padding:0;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:collapse;">
      <tr>
        <td align="center" style="padding:0;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="border-collapse:collapse;">
            <tr>
              <td style="padding:20px;">
                
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Hubspot templates follow the same philosophy: a full-width wrapper table, with a fixed-width inner table that holds the main content.

Essential HTML Email Best Practices for Hubspot Layouts

To keep your table-based layout robust inside Hubspot, focus on a few universal best practices.

Use Inline CSS for Reliable Rendering

Many email clients strip or ignore embedded and external style sheets. When coding for Hubspot, inline styles are the safest option.

  • Apply style="" directly to <table>, <td>, and text elements.
  • Avoid complex selectors and advanced CSS features.
  • Keep styles simple: fonts, colors, padding, borders, and alignment.

Stick to Basic Table Attributes

While HTML attributes like cellpadding are older, they remain widely supported and predictable for email layouts in Hubspot and other tools.

  • Use cellpadding and cellspacing when needed.
  • Set border="0" and use CSS for visual borders.
  • Keep width attributes consistent across nested tables.

Use Role and Alt Attributes for Accessibility

HTML email tables can still be accessible when built carefully for Hubspot campaigns.

  • Add role="presentation" to layout tables.
  • Use meaningful alt text for images.
  • Preserve a logical reading order with simple top-to-bottom structures.

Step-by-Step: Building a Simple Table Email for Hubspot

Follow these steps to construct a basic, reliable layout that you can paste into Hubspot’s code editor or a custom module.

1. Set Up the Outer Wrapper

Create a full-width wrapper table to control background color and centering.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f5f5f5;">
  <tr>
    <td align="center">
      
    </td>
  </tr>
</table>

2. Add a Centered Container Table

Inside the wrapper, insert a fixed-width table that will hold all content used in your Hubspot email.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff; border-collapse:collapse;">
  <tr>
    <td style="padding:20px; font-family:Arial, sans-serif; font-size:16px; line-height:1.5; color:#333333;">
      
    </td>
  </tr>
</table>

3. Build Header, Body, and Footer Sections

Use nested rows and columns inside the container to segment your Hubspot email template.

  • Header: logo and navigation.
  • Body: hero image, text, buttons, and columns.
  • Footer: contact details and unsubscribe information.

Example header row:

<tr>
  <td align="center" style="padding:20px;">
    <img src="https://via.placeholder.com/200x50" width="200" height="50" alt="Company Logo" style="display:block; border:0;" />
  </td>
</tr>

4. Create Columns with Nested Tables

Two-column layouts are common in Hubspot campaigns. Use nested tables rather than CSS floats.

<tr>
  <td style="padding:20px;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td width="50%" valign="top" style="padding-right:10px;">
          <p style="margin:0;">Left column content</p>
        </td>
        <td width="50%" valign="top" style="padding-left:10px;">
          <p style="margin:0;">Right column content</p>
        </td>
      </tr>
    </table>
  </td>
</tr>

Making Table Emails Responsive for Hubspot Campaigns

Modern subscribers expect mobile-friendly layouts, even when you rely on tables. With Hubspot, you can combine simple tables and responsive techniques.

Use Percentage Widths Where Possible

Fixed widths are stable, but percentages allow layouts to adapt to narrow screens.

  • Use width="100%" for wrapper tables.
  • Consider 100% width for main images on smaller devices.
  • Use 50% or 100% column widths depending on mobile strategy.

Leverage Basic Media Queries (When Supported)

Some email clients honor media queries, while others do not. When integrating HTML with Hubspot, add simple, mobile-first rules and fall back to a solid table layout for non-supporting clients.

Common approaches include:

  • Stacking columns on mobile by setting them to 100% width.
  • Adjusting font sizes for better readability.
  • Hiding non-essential decorative content on small screens.

Testing and Optimizing HTML Tables in Hubspot

Once your table-based HTML is ready, testing inside Hubspot is essential.

How to Test Your Email Layout

  1. Paste the HTML into a custom Hubspot email template or custom module.
  2. Send test emails to multiple inboxes (Gmail, Outlook, Apple Mail, Yahoo).
  3. Open on both desktop and mobile devices.
  4. Check spacing, line breaks, and image scaling.

Refine padding, alignment, and font sizes until the layout performs consistently across clients.

Improve Performance and Deliverability

Beyond layout, make sure your HTML email tables in Hubspot support good deliverability.

  • Keep overall file size reasonable by compressing images.
  • Avoid unnecessary nested tables and excessive code.
  • Use clean, semantic content where possible within table cells.

For broader digital optimization, you can also consult agencies like Consultevo for help aligning technical implementation with strategic goals.

Adapting Source Examples to Your Hubspot Workflow

The original reference for this approach outlines classic HTML email table patterns that still work well today. When adapting those examples for Hubspot:

  • Preserve the overall structure of wrapper and container tables.
  • Replace content blocks with Hubspot personalization tokens where needed.
  • Keep inline styles intact even when using the visual editor.

With a solid understanding of table-based HTML layouts, you can build email templates that remain consistent, accessible, and responsive across major email clients while integrating seamlessly with Hubspot’s marketing and automation features.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Verified by MonsterInsights