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.
Related
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>
I want to adjust the images with their respective texts below each image.
There are four images in one line. and other four in second line.
when I remove the any image from first line , then from the second line , first image should be placed to the last of the first line.
just like Queue
<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>
What I have tried is ,
<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_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_1455797754.png" border="0" height="110" width="110" >
</span>
</td>
</tr>
</table>
But there is not text adjustment with respective image.
PS: I have to use table and inline css , only.
Thank You.
well....one solution would be to put them all in the same row, and change the display of the table and of the td elements. so they will behave like block and inline-block elements. that way, you can set 4 td on each line , even if all 8 of them are in the same row ( in HTML ) , by using width:25%;display:inline-block
i wrote CSS because it was faster and easier for me and maybe better to understand, but you can copy the CSS and use it as inline CSS .
in my example i've hidden the first td with text TITLE1 so you can see that the 5th td ( first on the second row with text TITLE5 ) moves on the first row as the 4th td
let me know if it works for you
table { width:100%;display:block;text-align:center;}
table td { width:25%;display:inline-block;margin:0;padding:0;text-align:center;vertical-align: top;}
table td img { max-width:100%;}
table td span { word-break:break-word;}
td:first-child { display:none}
<table>
<tr>
<td><img src="http://placehold.it/350x150">
TITLE1
</td>
<td><img src="http://placehold.it/350x150">
<span>TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2TITLE2</span>
</td>
<td><img src="http://placehold.it/350x150">
TITLE3
</td>
<td><img src="http://placehold.it/350x150">
TITLE4
</td>
<td><img src="http://placehold.it/350x150">
TITLE5
</td>
<td><img src="http://placehold.it/350x150">
TITLE6
</td>
<td><img src="http://placehold.it/350x150">
TITLE7
</td>
<td><img src="http://placehold.it/350x150">
TITLE8
</td>
</tr>
</table>
well...again your question...nothing to do because you are using a table with fixed width and only one td..use javascript to delete whole span..if u delete a image on first row, the first image of second row will automatically will place to the last position of first row.
look my first snippet with 8 images..
<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_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_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_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>
</td>
</tr>
</table>
And check my second snippet after deleting the second image of first row.
<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_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_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_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>
</td>
</tr>
</table>
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 am making HTML emailer. When I view the template in gmail, it puts extra padding around the image.
I have used:
border-spacing:0;
display:block;
But it's not working.
HTML
<table style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; margin: 0 auto; border-spacing:0px; 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="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; 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: '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>
Thank You.
I was not able to reproduce your issue above, however I noticed a few things missing that might solve the problem.
Try this (starts on line 6 of your example above).
<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">
<a class="modimg" style="text-decoration: none!important;" href="#">
<img style="display: block; border: 3px solid #ffcbbc; outline: none; text-decoration: none;-ms-interpolation-mode: bicubic; display: block; mso-height-rule: exactly; line-height: 1;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110">
</a>
</td>
</tr>
</tbody>
</table>
use padding:0 , margin:0. according to your need where you want to put them.
I am trying to generate an html email being sent to customers. It renders find in most email clients but I am experiencing issues in Outlook Express and Outlook. Basically, I am trying to reserve two lines of space for my product link (two lines to be shown even if there is only one line of text). This works fine is other clients but not in these. Additionally, in outlook express the hyperlinks are always dark blue with a text underline. How can I standardize the size of the grid boxes along with fixing the hyperlink color. The color issue only happens in outlook express. The missing images are to remove logos from the posted image, this is not an issue.
<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
<tbody>
<tr>
<td>
<table width="290" align="left" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="company" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$525</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">Name of the product being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
<table width="290" align="right" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="Logo" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$1355</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">This is an example
product description for an item being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The code used to generate these boxes are:
$html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
<tbody>
<tr>
<td border="0" class="RespoImage_TwoThirdsW" width="290"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
</tr>
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%"> </td>
</tr>
</tbody>
</table>';
I am going to give the exact row of the project description changes.
Instead of this
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
Use like this
<tr>
<td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
<span style="color:#fff;">'.$params['title'].'</span>
</td>
</tr>