How can I remove space between the 1st tr and 2nd tr? I have to use image and can't use border property.
<table>
<tr>
<td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
<span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
target="_blank">Day 1</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse;">
<img src="http://www.hubilo.in/images_for_links/arrow.png" width="10" height="10" style="padding-left:100px; vertical-align:top; " valign="top" align="top">
</td>
</tr>
</table>
You forgot to add cellspacing="0" and cellpadding="0" to the top most table. Also there is a padding in td which needs to be set to 0. If you want the down arrow to stick to the top div then you would have to give margin-top:-2px as there is an space in the image itself
<table cellspacing="0" cellpadding="0">
<tr>
<td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
<span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
target="_blank">Day 1</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse; padding: 0;">
<span style="padding-left:100px; vertical-align:top; background:url(http://www.hubilo.in/images_for_links/arrow.png) 100px -2px no-repeat; background-size: contain; width: 10px; height: 10px; display: block;" valign="top" align="top">
</td>
</tr>
</table>
use <table cellpadding="0" cellspacing="0"> for the top level table as well
additionally the image your using is also having blank are above arrow ho need to crop that..
<table cellspacing="0" cellpadding="0">
<tr>
<td align="left" height="40" style="padding-left:30px;padding-bottom:0px;border-collapse: collapse;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td valign="middle" height="40" align="center" style="color: #FFFFFF;display: block;padding-left: 55px;padding-right: 55px;background-color:#EE163A;">
<span class="event_register" style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;font-size: 14px;line-height: 40px;display: inline-block;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;"
target="_blank">Day 1</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:0px;border-collapse: collapse; padding: 0;">
<img width="10" align="top" height="10" valign="top" style="padding-left: 100px; vertical-align: top; margin-top: -2px;" src="http://www.hubilo.in/images_for_links/arrow.png">
</td>
</tr>
</table>
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
SOLVED: Needed to declare a height on the main image that is nested in the table.
QUESTION: I have two tables that I'm trying to stack on top of one another in an html email but am getting a gap between them in Outlook 2016 only. The red box should touch the grey horizontal line. See picture below. All other version of Outlook are good. I've removed cell padding, borders, and spacing from all tables so I'm at a loss on this one. I also have this table aligned top. Any tricks to getting this to work in MSO 2016?
<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
<tr>
<td align="center" width="1">
<!-- margin SPACER-->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin SPACER-->
</td>
<td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
<tr>
<td align="center">
<table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
<tr>
<td>
<a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
</tr>
</table>
</td>
<td width="1">
<!-- margin -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
<tr>
<td style="padding-left: 10px;" height="44">
<table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
<tr>
<td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">GET QUESTIONS</td>
</tr>
<tr>
<td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<tr>
<td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">FOR YOUR DOCTOR</td>
<td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Have your tried using conditional comments?
For Outlook 2016 it should be something like the following:
<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->
I want to adjust image in table tag in such a way that if there are four images in a single tr and another four images in second tr , then if one image is removed from first tr , then from the second tr the first image should be placed in the first tr
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td>
<!--First Row-->
<!--Speaker 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="110">
<tbody>
<tr>
<td align="center" height="110"
valign="top" width="110">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
"font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
"padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Mahesh
Murthy</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Co-Founder at
Seefund</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 2-->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="110">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="110">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
"font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
"padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. R.
Chandrasekhar</span></p>
<p style=
"padding:0; margin:0 auto; max-width:110px;text-align: center !important; font-size: 8px;">
<span class="wrap_textbox">President at
NASSCOM</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg"
style=
"display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Jay
Panda</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Member of
Parliament</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 4 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Ms. Shazia
Ilmi</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Spokesperson at
BJP</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--More Speakers-->
<tr>
<td></td>
</tr>
<tr>
<td>
<!--Second Row-->
<!--Speaker 5 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Alok
Bansal</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Co-Founder at
Policybazaar</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 6-->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Arjun
Handa</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">Vice chairmain and
MD at Claris Life Sciences</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 7 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455297276.jpeg"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0px; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Ms. Padmaja
Ruparel</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">President Indian
Angel Network</span></p>
</td>
</tr>
</tbody>
</table><!--Speaker 8 -->
<table align="left" border="0" cellpadding="0" cellspacing="0"
style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px;">
<tbody>
<tr>
<td align="center">
<table align="center" border="0" cellpadding=
"0" cellspacing="0" style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"
width="120">
<tbody>
<tr>
<td align="center" height="100"
valign="top" width="100">
<p style=
"border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a class="modimg" href="#"
style=
"text-decoration: none!important;">
<img alt="" border="0" height=
"110" src=
"http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png"
style=
" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;"
width="110"></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="h2" style=
" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=
" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;">
<span class="wrap_textbox">Mr. Sanjay
Randhar</span></p>
<p style=
"padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;">
<span class="wrap_textbox">MD at
GVFL</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
In the snippet, If i remove one image from first tr , then there are only three images in first tr . but i want all possible images in first tr , and rest of images in second tr .
as per the image, I don't want the output like in the image.
PS: table width is 600. as I am making HTML Emailer. I have to use inline CSS.
Is this what you're looking for?
I'm not sure why you grouped all your images inside another table.
Try delete one picture.
<table style="width: 600px">
<tr>
<td style="text-align: center">
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455297276.jpeg" border="0" height="110" width="110" >
</span>
<span style="display: inline-block;width: 116px;margin-left: 15px">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" >
</span>
</td>
</tr>
</table>
Do You Mean like this? I try to delete picture no one.
<tr>
<table width="600">
<!--Speaker 2-->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="110">
<tbody><tr>
<td align="center" height="100" valign="top" width="110">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Mr. R. Chandrasekhar</span></p>
<p style="padding:0; margin:0 auto; max-width:110px;text-align: center !important; font-size: 8px;"> <span class="wrap_textbox">President at NASSCOM</span></p>
</td>
</tr>
</tbody>
</table>
<!--Speaker 3 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Mr. Jay Panda</span></p>
<p style="padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">Member of Parliament</span></p>
</td>
</tr>
</tbody>
</table>
<!--Speaker 4 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Ms. Shazia Ilmi</span></p>
<p style="padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">Spokesperson at BJP</span></p>
</td>
</tr>
</tbody>
</table>
<!--More Speakers-->
<!--Speaker 5 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Mr. Alok Bansal</span></p>
<p style="padding:0; margin:0 auto;text-align: center; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">Co-Founder at Policybazaar</span></p>
</td>
</tr>
</tbody>
</table>
<!--Speaker 6-->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Mr. Arjun Handa</span></p>
<p style="padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">Vice chairmain and MD at Claris Life Sciences</span></p>
</td>
</tr>
</tbody>
</table>
<!--Speaker 7 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455297276.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0px; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Ms. Padmaja Ruparel</span></p>
<p style="padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">President Indian Angel Network</span></p>
</td>
</tr>
</tbody>
</table>
<!--Speaker 8 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" display: block !important; border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'Montserrat', sans-serif;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style=" padding: 0; margin: 0 auto; max-width: 110px; text-align: center;font-size: 10px;"> <span class="wrap_textbox">Mr. Sanjay Randhar</span></p>
<p style="padding:0; margin:0 auto;text-align: center !important; max-width:110px; font-size: 8px;"> <span class="wrap_textbox">MD at GVFL</span></p>
</td>
</tr>
</tbody>
</table>
</table>
</tr>
Why not just use BootStrap? Not sure how many use HTML to create tables any more when CSS is much quicker and JS even quicker.
All that is needed now a days with HTML are the tags
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
The rest is styled with CSS
As far as using HTML I do not even remember the last time I built a table using HTML and thought you might want to reconsider how you are building it. tbody is pretty much an extinct tag that some browsers do not even recognize anymore. just trying to help you out and not putting you down
I have an image.
Now, What my doubt is, I want the text below image to be in new line if text is too long. When I enter long text then the cell(td) is enlarged which I don't want to be.
So I want the extra text to be in new line. It should be limited to the width of image, after that extra text should be in new line.
I can't use div and position property. I have to use table tag only.
Image height should be same. I have tried using word-wrap , white-space, but image height gets differ for that.
<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style="padding:0; margin:0;text-align: center;"> <span class="wrap_textbox">dsdsfsdfsdsfsdsdgsgdsdfsdfd</span></p>
</td>
</tr>
<tr>
<td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
<span class="wrap_textbox">Co-Founder at SeeFund</span>
</td>
</tr>
</tbody>
</table>
<!--Speaker 2-->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff; ">
<span class="wrap_textbox">Mr. R Chandrasekhar</span>
</td>
</tr>
<tr>
<td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
<span class="wrap_textbox">President of NASSCOM</span>
</td>
</tr>
</tbody>
</table>
<!--Speaker 3 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
<span class="wrap_textbox">Mr. Jay Panda</span>
</td>
</tr>
<tr>
<td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
<span class="wrap_textbox">Member of Parliament</span>
</td>
</tr>
</tbody>
</table>
<!--Speaker 4 -->
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; margin-left: 15px; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style="border: 3px solid #ffcbbc; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 5px;padding-bottom: 0px;text-align: center;color:#ffffff;">
<span class="wrap_textbox">Ms. Shazia Ilmi</span>
</td>
</tr>
<tr>
<td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
<span class="wrap_textbox">Spokesperson at BJP</span>
</td>
</tr>
</table>
So here's what i done...
<table bgcolor="black" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border: thin white solid; " align="left" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<td align="center">
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center" border="0" cellpadding="0" cellspacing="0" width="120">
<tbody><tr>
<td align="center" height="100" valign="top" width="100">
<p style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"><a class="modimg" style="text-decoration: none!important;" href="#"><img style=" border: 3px solid #ffcbbc ; outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="110" width="110" ></a></p>
</td>
</tr>
</tbody></table>
</td>
<tr>
<td class="h2" style=" font-weight: bold ;font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 10px;padding-top: 2px;padding-bottom: 0px;color:#ffffff;">
<p style="padding:0; margin:0;text-align: center; max-width:116px;"> <span class="wrap_textbox">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequuntur corporis, debitis dignissimos error fuga id inventore laudantium officiis quae quam, quia quos, repudiandae saepe sed sint tenetur? Doloribus, recusandae?</span></p>
</td>
</tr>
<tr>
<td class="h2" style="font-family: 'proxima_nova_rgregular', Arial, helvetica, sans-serif;font-size: 8px;text-align: center;color: #ffffff;">
<span class="wrap_textbox">Co-Founder at SeeFund</span>
</td>
</tr>
</tbody>
</table>
Just add: max-width:116px; (or whatever you're happy with as a maximum width) and then it'll move its self on to a new line for you.
UPDATED
This is the line I added the styling to:
<p style="padding:0; margin:0;text-align: center; max-width:116px;">
I'd highly advise putting these into CSS classes though and then into a stylesheet because if you ever wish to adjust the code in future you'll have to go into each file and adjust the style="" tag under each tag you've added it to.
I am designing the email newsletter template .
I created two buttons left and right side equally but it is not fit equal horizontal .
Here is html my code.
the output shows correctly in gmail but the out look not supported.
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want align equally in both side and need to support the outlook mail
Wrap your code in a table and put the two tables containing the buttons in two separate td.
Here is the code sample and fiddle
<table>
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
<font size="1" face="Arial">
<span style="font-size:12px;">
<font color="white">
<span style="display:block;">
<b>GET A QUICK QUOTE</b>
</span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Add float:left in both your <table> tags and it will do the trick.
replace your code with mine
<tr>
<td width="540" valign="top">
<table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
<a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;">
<font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td align="center" valign="top" style=" ">
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">
<tbody>
<tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px; font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>