Test Results

Want proof? View the test results to see how a table element renders across each of the most common email clients.

Usage

Tables are used to lay out information. When using a table for either layout or tabular data purposes, they are composed of the following:

• Headers
• Columns
• Rows
• Gutters

Use a table for layout when you want to structure the content of your email and use a table for tabular data when you have a series of columns and rows of information for the reader to comprehend.

For Layout

Although divs are used for layout in web development, tables are still the only universally supported method in email development for creating compatible layouts, making them the defacto solution in Email Kit.

Email Kit comes with many built-in layouts:

• Two Column
• Three Column
• Aside
• Responsive

Custom layouts can be easily created by adjusted the columns widths. Visit the Examples section below.

For Tabular Data

When displaying a table as information, use the .table class as this will automatically add row borders to make it easier for people to read and comprehend.

Numbers and dates should be right-aligned and everything else left-aligned.

Responsive

Making a table mobile-friendly requires the following:

• Add a .column-responsive class to each content column.
• Add a .column-responsive-gutter class to each gutter column.
• Add an additional .column-responsive-last class to the last content column.

This will allow columns to stack when the screen size is under 600px wide. For more information on responsive layouts and tables, visit the layout guidelines page.

Example

Copy the code below and paste it into a table within the .panel-body to create a table in your email.

Custom 3 Column Table

Use the code below to create a custom three column table.

Best Practices

Follow these best practices when using tables.

• Tables are your best friend. Use them.
• Tables should fill the entire width of the email.
• When using a table for layout purposes, add role=presentation to the table tag.
• When using a table for tabular data, use the .table class on the table tag.

Frequently Asked Questions

Answers to common questions about tables in Email Kit.