Tables are used to show content in columns and rows.
Want proof? View the test results to see how a table element renders across each of the most common email clients.
Tables are used to lay out information. When using a table for either layout or tabular data purposes, they are composed of the following:
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.
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
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.
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.
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.Customize the table by changing the column widths.
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.
If you are using the Email Kit defaults a 600 pixel email with a border and 32 pixel gutter spacers, then you have 534 pixels of horizontal space to work with. This means all of your content and spacer columns inside the table should equal 534 pixels.
Absolutely. Email Kit even nests tables to create the initial layout containers as well as other components.