Bad HTML using the template editor

Bad HTML using the template editor

I have used the Template Editor to create an email, and sent it to Email On Acid to made some cross client testing.

To my surprise, my email was cropped in Gmail, as if the content was to big. I then downloaded the email, and seen that the html was over 200kb. I look at it and discovered some REALLY bad html code.
  1. There were <div> tags containing the informations needed for the template editor, and not for the email. A cleanup should be done before sending an email.
    <div class="zpelement-wrapper image" componentbgcolor="transparent" coupcmp id="elm_1618285125255" prodcmp style=";word-wrap:break-word;overflow:hidden;padding:0px;background-color:transparent;" trace_width="300">

  2. "components" attribute were found on some tags, clearly used also for the template editor
    <table align="right" border="0" cellpadding="0" cellspacing="0" componentborder="#ffffff" componentbottombordersize="0px" componentbottomborderstyle="none" componenttopbordersize="0px" componenttopborderstyle="none" icontext="false" index="4" name="zcsclwdgts_alnmnt" style="font-size:12px;border-collapse: collapse;border: none;margin:auto;">

  3. Conflicting CSS / Repeating CSS.
    <td class="paddingcomp" style="border:0px;padding:0px 0px;line-height:19pt;border-top:0px none ;   border-bottom:0px none ;padding-top:7px;padding-bottom:7px;padding-right:15px;padding-left:15px;line-height:17pt;">

  4. Unused classes and Id
    <td class="txtsize" id="elm_1618283800260" style="border:0px;padding:0px 0px;border-collapse:collapse;" valign="top">

  5. Unnecessary table nesting. Every little details is wrapped into a table, even images. Generating unnecessary code, and limiting the use of valign="middle"

  6. RGB color code instead of hex. Using unnecessary bytes.
    <td height="570" style="border:1px solid rgb(0, 0, 0);padding:0px;" valign="top">

  7. font-size, and other css on the <table> tag that should be only on the <td>

  8. <meta> tags directly into the body

  9. Empty cells created for no reasons

  10. Inherited CSS attributes. Unnecessary to specify
    <table align="center" cellpadding="9" cellspacing="0" class="tmplfooter" id="F_INNER" style="width:600px;text-align:center;color:inherit;font-size:inherit;font-family:inherit;">
It took me several hours to clean this mess that should be very easy to avoid in the first place.