html - 知道如何让两张桌子并排，第三张桌子在底部
问题描述
我正在尝试使用 html 进行电子邮件签名。但我想做的是，并排放置两张桌子。第三个在底部。我设法通过align="left"在第一张桌子上使用来做到这一点。但是，我有 3 张桌子。前两个应该是并排的。但是第三个必须在底部。它在浏览器中工作。但在Outlook中，底部的表格在第二个表格之后向右移动。第一个有文本，第二个有图像。
我为我想要得到的东西画了漂亮的设计：
我想要的东西：
我得到什么：
我尝试了以下方法：
1. 使用 display:inline-block，不起作用
2. 使用align="left"第一个和第二个，甚至所有这些。不
3. 使用浮动，在浏览器中工作。但不是在 Outlook 中。
4. 将图像放在单元格中，不好看。
编码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>emailsignature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a
{
color: white;
text-decoration: none;
}
table{
border-collapse: collapse;
mso-cellspacing: 10px;
mso-padding-alt: 10px 10px 10px 10px;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
td{
padding: 0px;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
.footer{
font-size: 6.5pt;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width: 650px;margin:0;padding:0 !important; mso-line-height-rule: exactly;">
<table bgcolor="#FFFFFF" id="Table_01" width="325" height="200" border="0" align="left">
<tr>
<td height="25" width="650"></td>
</tr>
<tr>
<td width="173" height="25">
<p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p></td>
</tr>
<tr>
<td height="21" width="173">
<p style="font-size:11pt; font-weight:300; margin:0;">Operationeel Manager</p></td>
</tr>
<tr>
<td width="245" height="12">
<hr style="margin:0; width: 200px;"></td>
<td width="245" height="12"></td>
</tr>
<tr>
<td width="198" height="74" style="padding-bottom: 40px;">
<p style="font-size:10pt; margin:0;">
Straatstraat 18<br>
3333 AA Rotterdam<br>
Telefoon: +31 (0) 10 111 11 11<br>
Mobiel: +31 (0) 6 111 111 111 <br>
</p></td>
</tr>
</table>
<table bgcolor="#FFFFFF" id="Table_02" width="325" height="200" border="0" >
<tr>
<td width="15"> </td>
</tr>
<tr>
<td style="text-align: right;">
<img src="image" width="210" height="130" border="0" alt="logo">
</td>
</tr>
<tr>
<td width="15"> </td>
</tr>
</table>
<table bgcolor="#E53212" class="footer" id="Table_03" width="650" height="20" border="0">
<tr>
<td width="15">
</td>
<td width="50" style="text-align: center;" >
<a href="https://www.google.com" title="disclaimer " target="_blank">
disclaimer
</a>
</td>
<td width="12" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p>
</td>
<td width="48" height="18" style="text-align: center;">
<a href="https://www.google.com" title="privacy pagina " target="_blank">
privacy
</a>
</td>
<td width="16" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p>
</td>
<td width="200" height="18" style="text-align: center;">
<a href="" title="algemene voorwaarden" target="_blank">
algemene voorwaarden
</a>
</td>
<td width="13" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p>
</td>
<td width="120" height="18" style="text-align: center;">
<a href="https://www.google.com" title="kvk uitreksel" target="_blank">
kvk uittreksel
</a>
</td>
<td width="14" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p>
</td>
<td width="150" height="18" style="text-align: center;">
<a href="https://www.google.com" title="wka verklaring" target="_blank">
wka verklaring
</a>
</td>
<td width="300" height="32">
</td>
<td width="21" height="18">
<a href="" title="Website van Stecon" target="_blank">
<img src="image" width="21" height="20" border="0" alt="Een wereldbol icoon">
</a>
</td>
<td width="6" height="32">
</td>
<td width="20" height="18">
<a href="https://www.linkedin.com" title="Linkedin page" target="_blank">
<img src="image" width="20" height="20" border="0" alt="Linkedin logo">
</a>
</td>
<td width="18" height="32">
</td>
<td width="15"> </td>
</tr>
</table>
</body>
</html>
解决方案
- 您需要一个包装表来设置要占用的表的定义宽度。否则，您的内容将跨越电子邮件窗口的整个宽度。
- 不要为桌子上的高度而烦恼。您的内容将定义表格的高度。表格单元格上的高度也是如此。您的内容将为您执行此操作，除非您将其用于间隔单元等。
- 您的表格行之间的表格单元格不匹配。您要么需要在所有行中有两个单元格以匹配水平线，要么将 colspan="2" 添加到只有一个单元格的所有行。
- 您所有单元格的宽度都不起作用。当一行中只有一个单元格时，该单元格将填充表格设置的宽度。没有办法解决这个问题，这是表格单元格的自然行为。删除只有一个单元格的行的宽度。还要删除具有两个单元格的行中一个单元格的宽度。第二个单元格将填充剩余的宽度，由具有定义宽度的单元格留下。
- 在您的表格上设置当前 650 像素宽度后，您的两个内部表格将不会并排放置，因为 Outlook 中的一个愚蠢的怪癖会强制表格之间存在 20 像素的间隙。解决此问题的选项是 1) 将主表的宽度增加到 670 像素。2) 将一个或两个内表的宽度总共减少 20 像素。3) 使用幻表来模拟表格单元结构。4）按照@SJ_OWOW 的建议，将您的内部表格包装在表格单元格中。
这是我的代码版本。我从第 5 点开始选择表格单元格选项，因为您没有在签名中添加任何移动响应支持，所以为了方便我就选择了。我仍然要解决一些问题，但这至少应该解决您的主要问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>emailsignature</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
a
{
color: white;
text-decoration: none;
}
table{
border-collapse: collapse;
mso-cellspacing: 10px;
mso-padding-alt: 10px 10px 10px 10px;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
td{
padding: 0px;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
.footer{
font-size: 6.5pt;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;width: 650px;margin:0;padding:0 !important; mso-line-height-rule: exactly;">
<table width="100%" border="0">
<tr>
<td align="center">
<table width="650" border="0">
<tr>
<td width="325">
<table bgcolor="#FFFFFF" id="Table_01" width="325" height="200" border="0" align="left">
<tr>
<td colspan="2" height="25"></td>
</tr>
<tr>
<td colspan="2">
<p style="font-size:16pt; font-weight:600; margin:0;">John Doe</p></td>
</tr>
<tr>
<td colspan="2">
<p style="font-size:11pt; font-weight:300; margin:0;">Operationeel Manager</p></td>
</tr>
<tr>
<td width="245" height="12">
<hr style="margin:0; width: 200px;"></td>
<td></td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 40px;">
<p style="font-size:10pt; margin:0;">
Straatstraat 18<br>
3333 AA Rotterdam<br>
Telefoon: +31 (0) 10 111 11 11<br>
Mobiel: +31 (0) 6 111 111 111 <br>
</p></td>
</tr>
</table>
</td>
<td>
<table bgcolor="#FFFFFF" id="Table_02" width="325" height="200" border="0" align="right">
<tr>
<td width="15"> </td>
</tr>
<tr>
<td style="text-align: right;">
<img src="image" width="210" height="130" border="0" alt="logo">
</td>
</tr>
<tr>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table bgcolor="#E53212" class="footer" id="Table_03" width="650" height="20" border="0">
<tr>
<td width="15">
</td>
<td width="50" style="text-align: center;" >
<a href="https://www.google.com" title="disclaimer " target="_blank">
disclaimer
</a>
</td>
<td width="12" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p>
</td>
<td width="48" height="18" style="text-align: center;">
<a href="https://www.google.com" title="privacy pagina " target="_blank">
privacy
</a>
</td>
<td width="16" height="32" style="text-align: center;">
<p style="margin:0; color:#CE2811;">|</p>
</td>
<td width="200" height="18" style="text-align: center;">
<a href="" title="algemene voorwaarden" target="_blank">
algemene voorwaarden
</a>
</td>
<td width="13" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p>
</td>
<td width="120" height="18" style="text-align: center;">
<a href="https://www.google.com" title="kvk uitreksel" target="_blank">
kvk uittreksel
</a>
</td>
<td width="14" height="32" style="text-align: center;">
<p style="color:#CE2811; margin:0;">|</p>
</td>
<td width="150" height="18" style="text-align: center;">
<a href="https://www.google.com" title="wka verklaring" target="_blank">
wka verklaring
</a>
</td>
<td width="300" height="32">
</td>
<td width="21" height="18">
<a href="" title="Website van Stecon" target="_blank">
<img src="image" width="21" height="20" border="0" alt="Een wereldbol icoon">
</a>
</td>
<td width="6" height="32">
</td>
<td width="20" height="18">
<a href="https://www.linkedin.com" title="Linkedin page" target="_blank">
<img src="image" width="20" height="20" border="0" alt="Linkedin logo">
</a>
</td>
<td width="18" height="32">
</td>
<td width="15"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>推荐阅读
- python - 从 python 到烧瓶的传入请求错误
- javascript - 如何添加 plyr.io 下载按钮和进度缩略图
- hibernate - 尝试保存同一行时乐观锁定失败异常
- javascript - 为 Google 丰富的卡片正确部署结构化数据
- python - 如何在 QGraphicsItem 坐标系中获取光标单击位置？
- swift - 将图像放入 UIImageView（另一个 ViewController）时出错
- sql - SQL Server 不抛出异常
- javascript - 防止 css 影响另一个组件 Vue
- stan - 如何继承stan的S4类
- node.js - Mongodb Mongoose - 查找与 EXACT 查询匹配的文档