html表格和內聯樣式

我對HTML表格和內聯CSS沒有太多的經驗，但我正在嘗試創建一個HTML電子郵件簽名。理想情況下，我想在左側有一個小圖像，中間有文字，右側有一個較大的標識，一行文字位於一切下方。html表格和內聯樣式

我有基本的內容，但是我試圖對齊所有與似乎沒有工作的花車。什麼是一切排列順序的最佳方式？

<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:[email protected]">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 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;

example

來源

2013-10-28 AMC

忘記浮動，保證金和HTML 3/5。郵件已經過時了。你需要用桌子做所有事情。一行=一張表。你需要保證金或填充？做另一列。

Codepen

實施例：我需要文本的圖片的40×40 2一個餘量的10像素1一個3一個400像素

我開始行一個行：

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

來源

2013-10-28 23:59:23 ColoO

請您澄清一下嗎？ – AMC

如果您使用浮動或位置。你將在webmail（gmail，yahoo等）上獲得不錯的結果，但outlook自2007年以來擁有相同的html閱讀器。他只是瞭解表格。不要忘記重置保證金。祝你今天愉快！ – ColoO

你說的話很有道理，但是即使在你的例子Codepen中，問題仍然存在。當它應該水平排列時，較大的圖像位於底部。 – AMC

這應該是絕招：

<table width="400" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="50" height="40" valign="top" rowspan="3"> 
     <img alt="" src="" width="40" height="40" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="350" height="40" 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 width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;"> 
<img alt="" src="" width="200" height="60" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
    <tr> 
    <td width="350" height="20" 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>

UPDATE：按照意見調整代碼：

查看您的jsfiddle後，要注意有關表的一個重要的事情是其他每個一行表格單元格的寬度都必須是相同的寬度爲第一，並且所有單元格都必須添加到表格的總寬度中。

這裏是行不通的例子：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200" bgcolor="#252525">&nbsp; 
    </td> 
    <td width="400" bgcolor="#454545">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="300" bgcolor="#252525">&nbsp; 
    </td> 
    <td width="300" bgcolor="#454545">&nbsp; 
    </td> 
    </tr> 
</table>

雖然第二排也加起來600，它（以及任何其他行）必須具有相同的200-400分的第一行，除非你正在使用colspans。如果您使用的是合併單元格，你可以有一列，但它需要具有相同的寬度，因爲它是跨越細胞，所以此工程：

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="200" bgcolor="#252525">&nbsp; 
    </td> 
    <td width="400" bgcolor="#454545">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="600" colspan="2" bgcolor="#353535">&nbsp; 
    </td> 
    </tr> 
</table>

不是一個完整的教程，但我希望幫助引導你朝着未來的正確方向發展。

這裏是你所追求的代碼：

<table width="900" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="57" height="43" valign="top" rowspan="2"> 
     <img alt="Rashel Adragna" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" width="47" height="43" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="843" height="43" 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 width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;"> 
<img alt="Zopa Realty Group logo" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" width="177" height="54" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
    <tr> 
    <td width="843" colspan="2" height="20" 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>

你會注意到，我增加了一個額外10px的一些表格單元格。這與align/valigns結合充當您的單元格之間的填充。這是一個聰明的方法，實際上不得不添加填充，邊距或空填充單元。

來源

2013-10-29 13:29:07 John

插入我自己的圖片/值後，我遇到了和以前一樣的問題http://jsfiddle.net/A3d9b/ – AMC

這是什麼問題？路線？截圖可能會有所幫助。 – John

查看我的原始問題，瞭解我如何使用它的模型 - 水平方向的所有內容，其中一行文本位於下方。 – AMC

html表格和內聯樣式

回答

相關問題