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

问题描述

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

我有基本的内容，但是我已经尝试将所有内容与似乎不起作用的浮动对齐.将所有内容水平排列的最佳方法是什么?

例如:我需要一行1 一张40*40的图片2 一个 10 像素的边距3 一个 400px 的文本

我开始我的行:

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

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