Here’s a closer look at the syntax of that first table: Notice in the email template above, that each table element has a border attribute set to “0". To specify that it does not have a border, set the attribute to “0". To specify if a table has a simple black border in an HTML email, you can add the border attribute and set it to “1". Now let’s take a closer look at some other attributes below. Since mixing these two methods is likely going to cause issues in email applications, it’s best avoided. Or you can use inline CSS to set padding in individual cells.
You can set the cellpadding attribute once for each table element. You have two options for setting your cell padding. Cellpadding: The cellpadding attribute specifies space between the cell wall and cell content.Cellspacing: The cellspacing attribute specifies space between cells.You can set this attribute to left, right or center. Align: The align attribute specifies the alignment of a table according to the surrounding text.This is necessary for table elements in an HTML email because they are only used for layout purposes. The presentation role is used to remove semantic meaning from an element and its child elements. Role: The role attribute must be set to "presentation".Tables have their own set of attributes, including: However, some attributes are unique to certain HTML elements. The width attribute, for example, can be set on an image or table element. Many attributes can be applied to multiple elements. Attributes can be written in any order inside the opening tag. This information can be essential or non-essential, and impact the appearance, positioning, or functionality of an HTML element.Īttributes are always found in the opening tag of an HTML element and have the syntax: name="value". In HTML, attributes provide additional information about HTML elements.
Let’s take a closer look at the attributes you can define to add a border, background color, and other styling to your HTML email.
See the Pen HTML Email Table Template by Christina Perricone ( on CodePen. Using this template, you could build out a more complex email, like the one shown below. These are the essential building blocks of an HTML email. This div contains three tables: each representing the header, body, and footer of the email. Notice there is a div with the id name of “email". Each table element represents a different section of the email, including the header, body, and footer.īelow is a very basic HTML email table template. Let’s walk through the process below.Īn HTML email is made up of multiple table elements. Instead, they have to use the HTML table element to create emails and inline CSS to style them. Gmail, on the other hand, does.īecause email applications render emails in different ways, email marketers can’t take the same approach to coding as web designers or developers. Microsoft’s Outlook, for example, uses Microsoft Word as its rendering engine, which does not support the CSS padding property, among other things. Each email application has its own rendering engine that supports different HTML tags and CSS properties - and therefore determines how emails are displayed.
0 kommentar(er)
