Here are some HTML table properties and styles that will help you create an email message. If you are trying to solve some specific issues with your messages, please take a look at our HTML Email Design Guidelines.
Within the table or the table cell tags, you can use the border property (border-style, border width, and border color) to specify the style and color of an element's border.
The <table> tag defines an HTML table.
The <td> tag defines a standard cell in an HTML table.
To shorten the code, you can specify all the border properties in one property, this is called a shorthand property. For the border properties, the "border" values are:
<table> <tbody> <tr> <td style="border: 1px solid #000000;"> Height </td> <td style="border: 1px dashed #000000;"> Weight </td> </tr> <tr> <td style="border: 2px dotted #FFFFFF;"> Males </td> <td style="border: 2px double #FFFFFF;"> 1.9 </td> </tr> <tr> <td style="border: 1px solid #000000;"> Females </td> <td style="border: 1px solid #000000;"> 1.7 </td> </tr> </tbody> </table> |
It does not matter if one of the values above are missing (although, border-style is required), as long as the rest are in the specified order.
Also, you can even use "border - individual sides" properties so that it is possible to specify different borders for different sides (definition shown below).
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
---|---|---|---|
align | left center right | Deprecated. Use styles instead. Specifies the alignment of a table according to surrounding text | TF |
bgcolor | rgb(x,x,x) #xxxxxx colorname | Deprecated. Use styles instead. Specifies the background color for a table | TF |
border | pixels | Specifies the width of the borders around a table | STF |
cellpadding | pixels | Specifies the space between the cell wall and the cell content | STF |
cellspacing | pixels | Specifies the space between cells | STF |
frame | void above below hsides lhs rhs vsides box border | Specifies which parts of the outside borders that should be visible | STF |
rules | none groups rows cols all | Specifies which parts of the inside borders that should be visible | STF |
summary | text | Specifies a summary of the content of a table | STF |
width | pixels % | Specifies the width of a table | STF
|
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | Description | DTD |
---|---|---|---|
abbr | text | Specifies an abbreviated version of the content in a cell | STF |
align | left right center justify char | Aligns the content in a cell | STF |
axis | category_name | Categorizes cells | STF |
bgcolor | rgb(x,x,x) #xxxxxx colorname | Deprecated. Use styles instead. Specifies the background color of a cell | TF |
char | character | Aligns the content in a cell to a character | STF |
charoff | number | Sets the number of characters the content will be aligned from the character specified by the char attribute | STF |
colspan | number | Specifies the number of columns a cell should span | STF |
headers | header_id | Specifies one or more header cells a cell is related to | STF |
height | pixels % | Deprecated. Use styles instead. Sets the height of a cell | TF |
nowrap | nowrap | Deprecated. Use styles instead. Specifies that the content inside a cell should not wrap | TF |
rowspan | number | Sets the number of rows a cell should span | STF |
scope | col colgroup row rowgroup | Defines a way to associate header cells and data cells in a table | STF |
valign | top middle bottom baseline | Vertical aligns the content in a cell | STF |
width | pixels % | Deprecated. Use styles instead. Specifies the width of a cell | TF |
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
The color can be set by:
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
The border-style property can have from one to four values.
The border-style property is used in the example above. However, it also works with border-width and border-color.
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-bottom | Sets all the bottom border properties in one declaration |
border-bottom-color | Sets the color of the bottom border |
border-bottom-style | Sets the style of the bottom border |
border-bottom-width | Sets the width of the bottom border |
border-color | Sets the color of the four borders |
border-left | Sets all the left border properties in one declaration |
border-left-color | Sets the color of the left border |
border-left-style | Sets the style of the left border |
border-left-width | Sets the width of the left border |
border-right | Sets all the right border properties in one declaration |
border-right-color | Sets the color of the right border |
border-right-style | Sets the style of the right border |
border-right-width | Sets the width of the right border |
border-style | Sets the style of the four borders |
border-top | Sets all the top border properties in one declaration |
border-top-color | Sets the color of the top border |
border-top-style | Sets the style of the top border |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |
In this example, here's a simple table that illustrates some of the features of the HTML table model. The following table definition:
<table border="1"> <caption> <em>A test table with merged cells</em></caption> <tbody> <tr> <th rowspan="2"></th> <th colspan="2"> Average</th> <th rowspan="2"> Red<br> eyes</th> </tr> <tr> <th> height</th> <th> weight</th> </tr> <tr> <th> Males</th> <td> 1.9</td> <td> 0.003</td> <td> 40%</td> </tr> <tr> <th> Females</th> <td> 1.7</td> <td> 0.002</td> <td> 43%</td> </tr> </tbody> </table> |
In the eMail Networks editor, you can do an Inbox email preview in your account:
Now, let's add a 5px solid green border around the table, a 3px red dotted border around the 0.003 table cell, and a 6px blue dashed border around the 43% table cell.
<table align="center" bgcolor="white" border="5" bordercolor="green" style="border-style: outset;" summary="This table gives some statistics of average height and weight, and percentage; with red eyes (for both males and females)." width="600"> <caption> <em>A test table with merged cells</em></caption> <tbody border-style:dotted="" solid=""> <tr> <th rowspan="2"> </th> <th colspan="2"> Average</th> <th rowspan="2"> Red<br> eyes</th> </tr> <tr> <th> height</th> <th> weight</th> </tr> <tr> <th> Males</th> <td 2px="" dashed="" red=""> 1.9</td> <td style="background: white; margin: 0px auto; border: 3px dotted red; width: 100px;"> 0.003</td> <td> 40%</td> </tr> <tr> <th> Females</th> <td> 1.7</td> <td> 0.002</td> <td style="background: white; margin: 0px auto; border: 6px dashed blue; width: 50px;"> 43%</td> </tr> </tbody> </table> |