# Building Complex Emails
Since most email clients rely on **HTML tables** for layout (due to email client compatibility), you'll need to use nested tables to build the background and structure your content. Below is a step-by-step guide:
***
**Step 1: Build the Background of Your Email**
The first step is creating the foundational structure for your email’s background. If your email has distinct color sections, for example:
* **Grey** at the top
* **Red** in the middle
* **Black** at the bottom\
You’ll need to create a **single-column, three-row table** to represent these sections.
**How to Insert the Background Table**:
1. Click on "More Rich"
2. Insert a **single-column table with three rows**.\
3. Adjust the background color of each row using the background color button in the editor. To do this, hover over each cell and click "Cell Background"
***
**Step 2: Add Nested Tables for Content Structure**
Once the background is in place, add tables inside each row to define the content layout. This is especially important for structuring text, images, and other content. Always insert spacer columns (empty cells) for consistent spacing between elements.
* **Example**: If a section requires an image with some text to appear side by side, you’ll need to:
1. Insert a **three-column row** within the corresponding background row.
2. Use the middle column as a spacer between the left and right columns.\
**Adding Nested Tables**:
* Select the desired background row.\
* Insert another table (e.g., a three-column table) within the row.\
* Adjust column widths for spacing by click on the column outline.
***
**Step 3: Add Content to Each Section**
Now that your structure is ready, you can populate the tables with content:
1. **Text**: Use the text editor to format your copy (e.g., bold headers, aligned paragraphs).\
2. **Images**: Use the **Insert Image** button to add images to specific table cells. Make sure to define image sizes for better rendering in various email clients.
3. **Buttons**: Create clickable call-to-action buttons by using our [Insert Email CTA function](/emails/create-a-campaign/customise-email-ctas.md).
***
**Step 4: Preview and Test Your Email**
Once your email is built:
1. **Preview** it within the editor to ensure all elements are aligned correctly.
2. **Test** your email across multiple email clients (e.g., Outlook, Gmail, Apple Mail) to ensure compatibility. We would reccomend using [Litmus](https://litmus.com).
***
#### Tips for Building Emails
* **Use Spacer Columns**: Always insert spacer columns (empty cells) for consistent spacing between elements.
* **Avoid Absolute Positioning**: Email clients don’t handle CSS positioning well. Stick to table-based layouts.
* **Inline Styling**: Use inline styles for maximum compatibility, especially for fonts, padding, and colors.
* **Clean Imported HTML**: If you insert HTML from other sources, be sure to thoroughly clean the code. Many email builders inject their own classes and styles, which can conflict with your design and cause rendering issues across email clients.
* **Save as a Template**: Once you're happy with your email, [save it as a template](/emails/create-a-campaign/email-templates.md) for future use! This will save time and ensure consistency in your email campaigns.
By following these steps, you’ll be able to create professional and visually appealing emails that render correctly across all email clients.
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.wavecast.io/emails/create-a-campaign/building-complex-emails.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.