html表格&内联样式 [英] html tables & inline styles

问题描述

我对HTML表格和内联CSS没有太多的经验，但我正在尝试创建一个HTML电子邮件签名。理想情况下，我希望在左侧有一个小图像，中间有文字，右侧有一个较大的标识，一行文字位于所有内容的下方。

我有基本的内容，但是我试图用一些看起来没有工作的花车对齐所有的东西。什么是最好的方式来排列顺序水平？
$ b

示例：我需要一行
1 40 * 40
的一张图片一张10 px的边距
3 400px

我开始写下这行：

 < table style = background-repeat：no-repeat; width：450px; margin：0; cellpadding =0cellspacing =0border =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;>我的文字< / p> 
< / td> 
< / tr> 
< / table> 
  

I don't have a lot of experience with HTML tables and in-line CSS, but I'm trying to create an HTML email signature. Ideally, I'd like to have a small image on the left, text in the center, and a larger logo on the right, with a line of text centered below everything.

I have the basic content in, however I've tried to align everything with floats which don't seem to be working. What's the best way to have everything lined up in order horizontally?

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 width="47" 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/" alt="First Last" style="border:none;width:47px;"></a>
</td>

<td width="10" style="width:10px;">&nbsp;</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:[e-mail]">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:[phone]">111.111.1111</a></span>
</td>
</tr>

<td width="177" 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/" alt="ZOPA Realty Group" 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 />
&nbsp;

解决方案

Forget float, margin and html 3/5. The mail is very obsolete. You need do all with table. One line = one table. You need margin or padding ? Do another column.

Codepen

Example : i need one line with 1 One Picture of 40*40 2 One margin of 10 px 3 One text of 400px

I start my line :

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

这篇关于html表格&内联样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！