gpt4 book ai didi

HTML 电子邮件 : image adjust itself in table

转载 作者:太空宇宙 更新时间:2023-11-03 19:29:13 24 4
gpt4 key购买 nike

我想调整 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>

在代码片段中,如果我从第一个 tr 中删除一个图像,那么第一个 tr 中只有三个图像。但我希望第一个 tr 中所有可能的 图像,第二个 tr 中的其余图像。

Here is the image

根据图片,我不想要图片中的输出。

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

最佳答案

这是您要找的吗?

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

尝试删除一张图片。

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

关于HTML 电子邮件 : image adjust itself in table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39160785/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com