user123 user123 - 3 months ago 5
CSS Question

HTML Email : image adjust itself in 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
.

Here is the image

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.

Thank You.

Answer

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">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455299755.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455298163.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455297276.jpeg" border="0" height="110" width="110" ></a>
        </span>
        <span style="display: inline-block;width: 116px;margin-left: 15px">
<a href="#"><img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455797754.png" border="0" height="110" width="110" ></a>
        </span>
    </td>
</tr>
</table>

Comments