html 表格和内联样式
Posted
技术标签:
【中文标题】html 表格和内联样式【英文标题】:html tables & inline styles 【发布时间】:2013-11-07 22:35:41 【问题描述】:我在 html 表格和内联 CSS 方面没有太多经验,但我正在尝试创建 HTML 电子邮件签名。理想情况下,我希望左边有一个小图片,中间有文字,右边有一个较大的徽标,在所有内容的下方居中放置一行文字。
我有基本内容,但是我尝试将所有内容与似乎不起作用的浮动对齐。让所有东西水平排列的最佳方式是什么?
jsfiddle
<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td style="float:left;width:47px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/47/43/" style="border:none;width:47px;"></a>
</td>
<td style="width:10px;"> </td>
<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email@example.com">FIRST LAST</a>
</td>
</tr>
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>
<td style="float:right;width:177px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/177/54/" style="border:none;width:177px;"></a>
</td>
</table>
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams. Each Keller Williams Realty office is independently owned and operated.</span></td>
<br />
【问题讨论】:
【参考方案1】:忘记浮动、边距和 html 3/5。邮件非常陈旧。你需要用桌子做所有事情。 一行 = 一张桌子。您需要边距或填充?再写一列。
Codepen
示例:我需要一行 1 一张40*40的图片 2 一个 10 px 的边距 3 一篇400px的文字
我开始我的线路:
<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
<tr style="height:40px; width:450px; margin:0;">
<td style="height:40px; width:40px; margin:0;">
<img src="" style="width=40px;height40;margin:0;display:block"
</td>
<td style="height:40px; width:10px; margin:0;">
</td>
<td style="height:40px; width:400px; margin:0;">
<p style=" margin:0;"> my text </p>
</td>
</tr>
</table>
【讨论】:
你能澄清一下吗? 如果你使用浮动或位置。您将在 webmail(gmail、yahoo 等)上获得良好的结果,但自 2007 年以来,outlook 具有相同的 html 阅读器。他只了解表格。不要忘记重置保证金。祝你有美好的一天! 你说的很有道理,但是即使在你的示例 Codepen 中,问题仍然存在。当它应该水平排列时,较大的图像位于底部。 请张贴您想要的结果屏幕。我不明白:s 感谢您的帮助;请参阅我的原始问题以获取图像模型。【参考方案2】:这应该可以解决问题:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" rowspan="3">
<img src="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">LAST FIRST</a><br>
REALTOR | P 123.456.789
</td>
</tr>
<tr>
<td valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img src="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
更新:根据 cmets 调整代码:
查看完您的 jsFiddle 后,关于表格需要注意的重要一点是,表格中的每一行中的单元格宽度都必须与第一行的宽度相同,并且所有单元格都必须添加到表格的总宽度中。
这是一个不起作用的示例:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#252525">
</td>
<td bgcolor="#454545">
</td>
</tr>
<tr>
<td bgcolor="#252525">
</td>
<td bgcolor="#454545">
</td>
</tr>
</table>
尽管第二行加起来是 600,但它(以及任何其他行)必须与第一行具有相同的 200-400 拆分,除非您使用 colspans。如果你使用 colspan,你可以有一行,但它需要与它所跨越的单元格具有相同的宽度,所以这是可行的:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#252525">
</td>
<td bgcolor="#454545">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#353535">
</td>
</tr>
</table>
不是一个完整的教程,但我希望它能帮助你在未来朝着正确的方向前进。
这是你要的代码:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" rowspan="2">
<img src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<a href="" style="color: #D31145; font-weight: bold; text-decoration: none;">RASHEL ADRAGNA</a><br>
REALTOR | P 855.900.24KW
</td>
</tr>
<tr>
<td valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
您会注意到我在您的某些表格单元格中添加了额外的 10 像素。这与 align/valigns 结合起来充当单元格之间的填充。这是一种避免实际上必须添加填充、边距或空填充单元格的巧妙方法。
【讨论】:
插入我自己的图像/值后,我遇到了与之前相同的问题jsfiddle.net/A3d9b 那是什么问题?对齐方式?屏幕截图可能会有所帮助。 查看我的原始问题,了解我希望它如何工作的模型 - 所有内容水平排列,下方居中一行文本。以上是关于html 表格和内联样式的主要内容,如果未能解决你的问题,请参考以下文章