How to Build Data Tables in HTML Email

To build data tables in HTML email, use a real <table> for related data, mark headers with <th>, keep values inside <td>, apply critical styling inline, and make the base table readable without advanced CSS. Keep the structure simple and test the delivered version in the inboxes your audience uses.

That approach matters because data tables need both visual and programmatic relationships. In 2026 testing by a11y.email, table headers worked in 18 of 21 tested email clients. Explicit id and headers associations worked in 17 of 21.

Microsoft also recommends simple data tables, clear headers, responsive behavior, and avoiding fixed-width tables where possible.

This guide is for email developers, designers, SaaS teams, ecommerce brands, and marketers who need to show orders, prices, reports, schedules, invoices, or other structured data inside an email.

What Is an HTML Email Data Table?

An HTML email data table is a table that displays information with meaningful relationships between rows and columns.

Common examples include:

• Order summaries

• Product quantities

• Invoice line items

• Account usage reports

• Pricing information

• Event schedules

• Shipping details

• Monthly performance metrics

Consider this information:

“$29” only makes sense because readers can connect it with Starter Plan and Total.

That relationship makes the content tabular.

Data Tables vs. Layout Tables

A data table communicates relationships between data. A layout table positions email content visually. They use similar HTML elements but should not receive the same accessibility markup.

This difference is especially important in HTML email.

Email developers often use layout tables because some inboxes handle modern web layout techniques differently.

MailEditor already has a dedicated guide covering those broader structural issues. Use that page when your intent is email layout, rather than tabular data: Outlook-compatible HTML email structure

For a real data table, do not use:

<table role="presentation">

That attribute intentionally removes table semantics.

A real data table needs those relationships preserved.

W3C guidance says data tables should distinguish header cells from data cells so assistive technologies can understand their relationships.

When Should You Use a Table?

Use a data table when readers need to compare several related values across rows or columns.

For example:

Good use:

The row-and-column relationship matters.

Better as normal text:

Plan: Pro
Renewal date: October 5

Two simple facts usually do not need a table.

Should every structured email use tables?

No.

Use a data table when the table itself helps readers understand relationships.

For simple pairs, short summaries, or single values, headings and paragraphs may create a clearer mobile experience.

Build Data Tables in HTML Email

The safest process is to start with semantic HTML and then add email-safe presentation.

Follow these seven steps.

1. Define the Data First

Decide what each column represents before writing HTML.

For an order email, you might need:

• Item

• Quantity

• Total

Avoid adding columns simply because desktop space is available.

Every extra column makes mobile rendering harder.

A good email table usually contains only the information required to understand or act on the message.

2. Create the Table

Start with a normal HTML table:

<table>

  ...

</table>

Unlike layout tables, this table should keep its table semantics.

Do not add:

role="presentation"

3. Add Table Rows

Use <tr> for every row:

<tr>

  ...

</tr>

Keep the structure predictable.

For email, simple structures tend to be easier to render and easier to understand.

4. Mark Column Headers

Use <th> for headers:

<tr>

  <th scope="col">Item</th>

  <th scope="col">Quantity</th>

  <th scope="col">Total</th>

</tr>

The <th> element identifies a header.

scope="col" states that each header describes its column.

W3C recommends <th> for header cells and <td> for data cells. For simple tables, scope can make the relationship more explicit.

5. Add Data Cells

Ordinary values belong inside <td>:

<tr>

  <td>Starter Plan</td>

  <td>1</td>

  <td>$29</td>

</tr>

Each value now appears beneath the correct header.

6. Add Inline Styling

Critical email styles should remain close to the element.

For example:

<td

  style="

    padding:12px;

    font-family:Arial, Helvetica, sans-serif;

    font-size:15px;

    line-height:22px;

    color:#111827;

    border-bottom:1px solid #d1d5db;

  "

>

  Starter Plan

</td>

Inline styles reduce dependence on stylesheets that different email environments may process differently.

Gmail currently supports standard CSS and media queries, but its documentation also notes that unsupported CSS can be ignored.

That is why the table should remain usable before responsive enhancements run.

7. Add a Mobile Enhancement

Use media queries as an enhancement rather than the foundation.

For example:

<style>

  @media screen and (max-width:480px) {

    .data-table th,

    .data-table td {

      padding:8px 6px !important;

      font-size:14px !important;

      line-height:20px !important;

    }

  }

</style>

The desktop table should already use fluid sizing.

The media query simply gives smaller screens extra breathing room.

Copy-Ready HTML Email Data Table

Here is a simple pattern you can adapt.

<!-- Layout wrapper -->

<table

  role="presentation"

  width="100%"

  cellpadding="0"

  cellspacing="0"

  border="0"

  style="width:100%;"

>

  <tr>

    <td

      align="center"

      style="padding:24px 12px;"

    >

      <!-- Content container -->

      <table

        role="presentation"

        width="100%"

        cellpadding="0"

        cellspacing="0"

        border="0"

        style="width:100%; max-width:600px;"

      >

        <tr>

          <td

            style="

              padding:0 0 12px;

              font-family:Arial, Helvetica, sans-serif;

              font-size:20px;

              line-height:28px;

              font-weight:bold;

              color:#111827;

            "

          >

            Order Summary

          </td>

        </tr>

        <tr>

          <td>

            <!-- Real data table: no role="presentation" -->

            <table

              class="data-table"

              width="100%"

              cellpadding="0"

              cellspacing="0"

              border="0"

              style="

                width:100%;

                border-collapse:collapse;

                font-family:Arial, Helvetica, sans-serif;

              "

            >

              <tr>

                <th

                  scope="col"

                  align="left"

                  style="

                    padding:12px 10px;

                    background:#f3f4f6;

                    border-bottom:1px solid #d1d5db;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:left;

                  "

                >

                  Item

                </th>

                <th

                  scope="col"

                  align="center"

                  style="

                    padding:12px 10px;

                    background:#f3f4f6;

                    border-bottom:1px solid #d1d5db;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:center;

                  "

                >

                  Qty

                </th>

                <th

                  scope="col"

                  align="right"

                  style="

                    padding:12px 10px;

                    background:#f3f4f6;

                    border-bottom:1px solid #d1d5db;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:right;

                  "

                >

                  Total

                </th>

              </tr>

              <tr>

                <td

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                  "

                >

                  Starter Plan

                </td>

                <td

                  align="center"

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:center;

                  "

                >

                  1

                </td>

                <td

                  align="right"

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:right;

                  "

                >

                  $29

                </td>

              </tr>

              <tr>

                <td

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                  "

                >

                  Extra Seats

                </td>

                <td

                  align="center"

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:center;

                  "

                >

                  3

                </td>

                <td

                  align="right"

                  style="

                    padding:12px 10px;

                    border-bottom:1px solid #e5e7eb;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:right;

                  "

                >

                  $18

                </td>

              </tr>

              <tr>

                <th

                  scope="row"

                  align="left"

                  style="

                    padding:14px 10px;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    text-align:left;

                  "

                >

                  Total

                </th>

                <td

                  style="padding:14px 10px;"

                >

                  &nbsp;

                </td>

                <td

                  align="right"

                  style="

                    padding:14px 10px;

                    color:#111827;

                    font-size:15px;

                    line-height:22px;

                    font-weight:bold;

                    text-align:right;

                  "

                >

                  $47

                </td>

              </tr>

            </table>

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

This example intentionally keeps the data table simple.

The outer tables use role="presentation" because they control layout.

The actual order table does not.

That distinction is one of the most important details in this guide.

How Do You Make It Responsive?

A responsive email data table should remain understandable on small screens without depending on horizontal scrolling. Start with fewer columns, fluid width, concise labels, compact data, and percentage-based sizing. Then use supported media queries to adjust padding or type where appropriate.

Start with:

width="100%"

Avoid setting the whole data table to a large fixed pixel width.

Microsoft specifically advises avoiding fixed-width tables where possible and checking whether users need horizontal scrolling on phones.

Keep columns limited

Three columns are easier to manage than eight.

For example:

Better for email

Harder on mobile

If every field matters, consider splitting the information.

You could show the most important summary in the email and provide a clear link to the detailed account page.

Responsive Table Approaches Compared

Different datasets need different mobile strategies.

1. Refit the Same Table

This is usually the best first choice.

Keep:

• Short headings

• Short values

• Percentage width

• Smaller mobile padding

• Sensible font sizes

The same semantic table remains intact.

2. Remove Optional Columns

Sometimes a secondary field can disappear on small screens.

For example, an order table may not need the SKU if the product name is already clear.

Only hide a column when removing it does not change the meaning.

3. Create a Mobile Version

A separate mobile representation gives you more control over complex datasets.

However, this approach introduces two versions of the same information.

Both versions need testing.

Hidden-content behavior also differs across email environments, so this solution should be used intentionally.

4. Convert Records Into Cards

Suppose each row represents one order:

Order #1049
Status: Shipped
Total: $89

That can work well as a mobile card because the information remains understandable without cross-column comparison.

Do not convert a table into cards when readers need to compare values across multiple rows.

5. Avoid Horizontal Scroll as Default

Horizontal scrolling is common on websites.

Email clients give you less control.

A table that requires sideways movement may also become difficult for users working with magnification.

Use scrolling only after testing the environments that matter to your audience.

How Do You Make Data Tables Accessible?

An accessible email data table uses semantic HTML to preserve relationships between headers and values. Use <th> for headers, <td> for data, scope where useful, simple structures, meaningful labels, adequate contrast, and a logical reading order.

Use Real Headers

Do not make a normal <td> bold and assume it becomes a header.

This:

<td style="font-weight:bold;">

  Price

</td>

looks like a heading visually.

It does not provide the same semantics as:

<th scope="col">

  Price

</th>

Use Row Headers When Needed

If the first cell identifies the entire row, consider:

<th scope="row">

  Total

</th>

Now the markup describes its relationship to the row.

Keep Tables Simple

Avoid complexity when possible.

Merged cells, nested data tables, multiple header levels, and large blank sections make relationships harder to follow.

W3C recommends breaking complex tables into simpler tables when practical.

Do Not Use Color Alone

Imagine a status column:

🟢
🟡
🔴

Someone who cannot distinguish the colors may lose the meaning.

Use text:

Active
Pending
Action required

Color can reinforce the status.

It should not be the only signal.

Maintain Readable Contrast

Make header text, body values, links, and total rows easy to distinguish.

Also test dark mode.

MailEditor has a broader guide for responsive email behavior, which is a better place to cover mobile typography, spacing, buttons, and dark-mode design in depth: mobile-responsive email design best practices

What About Gmail?

Gmail supports standard CSS and media queries for email, but the table should not depend on advanced CSS to remain understandable. Apply critical presentation inline first, then use supported responsive rules as enhancements.

Google currently documents support for:

• Class selectors

• Element selectors

• ID selectors

• Standard media queries

• A defined subset of CSS properties

It also states that unsupported CSS may be ignored.

For data tables, that means the base version should already have:

• Readable text

• Correct alignment

• Usable spacing

• Clear headers

• Visible borders where needed

• Fluid width

Then enhance it for smaller screens.

What About Outlook?

Keep Outlook data tables simple and fluid, and avoid depending on complex web-style behavior. Microsoft recommends clear table headers, avoiding fixed widths where possible, testing on mobile, and avoiding nested, split, or merged cells in data tables.

Microsoft's current Outlook accessibility guidance says simple data structures help screen-reader users keep track of rows and columns.

For an email data table:

• Keep the table simple.

• Apply spacing to cells.

• Avoid unnecessary nested data tables.

• Limit merged cells.

• Keep important content as live text.

• Test the delivered email.

• Verify mobile readability.

MailEditor already has deeper Outlook-specific coverage, so repeating every Outlook layout technique here would create unnecessary overlap. See the existing Outlook-compatible HTML email guide for broader rendering guidance.

Common Data Table Mistakes

Using role="presentation"

This is correct for a layout table.

It is not correct for a genuine data table.

The data table needs its semantics.

Using Images for the Whole Table

Turning an invoice or report into an image gives you visual control, but important information is no longer normal live text.

It also makes:

• Text selection difficult

• Mobile reading harder

• Accessibility weaker

• Dynamic data updates harder

Use HTML for essential table data.

Adding Too Many Columns

Wide desktop tables shrink quickly on phones.

Start by asking which columns readers genuinely need inside the email.

Using Long Header Labels

Prefer:

Qty

instead of:

Quantity of Items Purchased

Prefer:

Total

instead of:

Final Purchase Amount

Short labels save horizontal space.

Relying on CSS Alone

A data table should still make sense when optional responsive styling changes or disappears.

Structure first.

Enhancement second.

Nesting Tables Inside Data Cells

Email layouts regularly use nested tables.

Real data tables need more care.

Nesting a presentation table inside a meaningful data cell can complicate the accessible relationship between content and its headers.

When possible, keep content inside each data cell simple.

Forgetting the Final ESP Version

Your HTML may change after entering an email service provider.

Platforms can process:

• Links

• Variables

• Tracking

• Styles

• Dynamic content

• Unsubscribe blocks

Test the actual delivered version.

MailEditor has a separate guide for this exact QA intent: how to test email templates across devices

Build Data Tables With MailEditor

MailEditor can handle the surrounding email visually while you keep specialized data-table markup controlled.

A practical workflow is:

1. Build or open the main email in MailEditor.

2. Create the header, body sections, CTAs, and footer visually.

3. Add your tested data-table HTML where custom HTML is appropriate.

4. Keep the data table simple and semantic.

5. Preview the full email on different screen sizes.

6. Export the finished HTML.

7. Send the final version through your real email platform.

8. Test the delivered message.

MailEditor supports visual HTML email editing, reusable modules, responsive controls, custom HTML blocks, and clean HTML exports. MailEditor HTML email builder

If you would rather start from an existing design, browse the responsive HTML email template library and customize the surrounding email before adding your data component.

Why use a visual workflow?

Most campaigns contain far more than the table.

You may also need:

• Logo and brand header

• Introductory copy

• Account information

• CTA buttons

• Product information

• Support links

• Footer content

A visual editor lets your team work on those areas without manually rebuilding the entire HTML document.

The specialized table code can remain focused on the data itself.

HTML Email Data Table Checklist

Before approving a data table, check:

Structure

• The content is genuinely tabular.

• Header cells use <th>.

• Data cells use <td>.

• scope is used where it clarifies relationships.

• The real data table does not use role="presentation".

• Layout wrappers do use presentation semantics where appropriate.

Content

• Column names are short.

• Data is concise.

• Units are clear.

• Currency formatting is consistent.

• Empty cells do not create confusion.

Mobile

• Table uses fluid width.

• Important text stays readable.

• Users do not need unnecessary horizontal scrolling.

• Columns remain understandable.

• Media-query enhancements have safe fallbacks.

Accessibility

• Headers identify their data.

• Meaning does not depend only on color.

• Reading order is logical.

• Contrast remains readable.

• Essential information remains live text.

Testing

• Gmail checked.

• Outlook checked.

• Apple Mail checked where relevant.

• Mobile inbox checked.

• Dark mode checked.

• Final ESP-delivered version checked.

Final Answer

To build data tables in HTML email, use semantic table markup for real tabular information, identify headers with <th>, place ordinary values in <td>, style critical properties inline, and design the base table to remain readable on small screens.

The key distinction is simple:

Layout table → role="presentation"

Data table → preserve table semantics

Keep the data compact. Avoid unnecessary merged or nested cells. Treat responsive CSS as an enhancement, not a dependency. Finally, test the version that actually travels through your email platform and reaches the inbox.

MailEditor can handle the surrounding responsive email visually while your team keeps specialized HTML components controlled and reusable.

Build your next HTML email with MailEditor

Frequently Asked Questions

Question: Can you use data tables in HTML email?

Answer: Yes. Data tables can be used in HTML email when information has meaningful row-and-column relationships. Use semantic <table>, <th>, <tr>, and <td> markup. Keep the structure simple, make it responsive, and test the delivered version across relevant email clients.

Question: Should email data tables use role="presentation"?

Answer: No. role="presentation" is intended for tables used only to control visual layout. A genuine data table needs its table semantics so assistive technologies can understand relationships between headers and values.

Question: How do I make an HTML email table responsive?

Answer: Start with width="100%", limit the number of columns, keep labels concise, and avoid fixed-width data tables. Use media queries to adjust padding and typography where supported, but make sure the base table remains readable without them.

Question: Should I use <th> in HTML email?

Answer: Yes, when the cell is genuinely a row or column header. Using <th> helps identify the structure of a data table. The scope="col" and scope="row" attributes can further describe header relationships.

Question: Can I use Flexbox for a data table in email?

Answer: A genuine data table should use table semantics rather than recreating tabular relationships with Flexbox. This preserves the connection between column headers, row headers, and data cells.

Question: Should I convert a large email table into an image?

Answer: Not for important data. An image can preserve appearance, but essential text becomes harder to select, resize, interpret with assistive technology, or adapt to mobile screens. Use live HTML for important information.

Question: How many columns should an email table have?

Answer: There is no fixed maximum. However, fewer columns are easier to read on mobile. Start with the smallest number needed to preserve the meaning of the data. For many emails, two to four concise columns are easier to manage than a wide desktop-style table.