Skip to content Skip to sidebar Skip to footer

Html Email Table Nesting

I'm writing some html code to make an html email. I've done some research and I found that using old school html, such as tables etc is the best way to do this. I haven't used tabl

Solution 1:

(Following the HTML design sketch you provided in the comments - http://i48.tinypic.com/1zp2m89.png)

In order to achieve that, set colspan="2" (colspan) to the larger rows TDs. This will make them span across 2 columns, and leave your third (content and icons) row as a two columns row. This will be a good solution if you don't need to complicate the design later on by adding more columns, as it will be quite messy playing with colspans. If at some point it becomes too messy, you could also use a table inside another table to achieve the same results and provide an easy way to fine tune the design.

I've set up an example of it using your code: http://jsfiddle.net/dvirazulay/TFweS/1/

Solution 2:

You were missing a colspan attribute in the td that is in your header and devices rows:

            <tr class="header">
                <tdclass="fixedwidth"colspan="2"><imgsrc="http://i49.tinypic.com/347i55g.png"border="0"></td></tr><trclass="devices"style="width:600px; height:300px;"><tdcolspan="2"><imgsrc="http://i47.tinypic.com/nujr9.png"></td></tr>

Post a Comment for "Html Email Table Nesting"