HTML电子邮件:图像在表格中自行调整

时间:2016-08-26 07:32:33

标签: html css image html-table html-email

我想调整 table 标记中的图片,使得如果一个tr中有四个图像,而第二个tr中有另外四个图像,那么从第一个tr中删除一个图片,然后从第二个tr中删除第一个图片应放在第一个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>
&#13;
&#13;
&#13;

在代码段中,如果我从第一个tr中移除一个图像,则第一个tr中只有三个图像。但是我希望所有可能的图像位于第一个tr中,其余图像位于第二个tr中。

Here is the image

根据图片,我不想像图片中那样输出。

PS:表格宽度为600.因为我正在制作HTML Emailer。我必须使用内联CSS

3 个答案:

答案 0 :(得分:0)

你的意思是这样吗?我试图删除没有人的图片。

&#13;
&#13;
<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>
		
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是你要找的吗?

我不确定为什么要将所有图像分组到另一个表格中。

尝试删除一张图片。

<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>

答案 2 :(得分:-1)

为什么不使用BootStrap?不知道有多少人使用HTML来创建表格,当CSS更快,JS更快。

使用HTML现在需要的所有内容都是标记

  <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>

其余部分用CSS

设计

就使用HTML而言,我甚至不记得上次使用HTML构建表格,并认为您可能想重新考虑如何构建它。 tbody几乎是一个已经灭绝的标签,有些浏览器甚至不再认识。只是想帮助你而不是让你失望