使用iframe格式化html表格內容

我有一個iframe，其高度爲100px，寬度爲450px。我試圖格式化HTML表，以便它具有以下佈局：使用iframe格式化html表格內容

_______ 
|  | GREY_TEXT: BLUE_TEXT 
|  | Hyperlink 
| img | SOME_TEXT ~ DATE 
|  | BLACK_TEXT 
-------

在IMG是100高80寬

我遇到的問題是，有時GREEN_Text以上結束了iframe中的圖像取決於超鏈接的長度。黑色的文本長度不應該因爲它可以被切斷，我不會放置垂直卷軸。

我的代碼是：

<!DOCTYPE html> 
<html> 
<body> 
<table height="100" width="450"> 
<tr> 
<td height="100" width="80"> 
<table style="margin-top:50px"> 
<img align="top" src="myPicPath.png" height="100" width="120"> 
</table> 
</td> 
<td height="100" width="200"> 
<table height="25" width="387" style="margin-top:-20px"> 
<tr> 
<td width="20"> 
<p style="color:#A0A0A0; font-family:arial; font-size:12px;"> GREY_TEXT:</p> 
</td> 
<td width="86"> 
<p style="color:blue; font-family:arial; font-size:12px;">BLUE_TEXT 
</td> 
<td width="0"> 
<!--left Blank--> 
</td> 
<td width="205" style="text-align:right;"> 
<p style="color:#A0A0A0; font-family:arial; font-size:12px;"> SOME_TEXT | DATE 
</p> 
</td> 
</tr> 
</table> 
<table height="25" style="margin-top:-20px"> 
<tr> 
<td> 
</td> 
</tr> 
</table> 
<table height="50" width="370"> 
<a style="font-family:arial; font-size:15px;" target="_blank" href="http://SOMESITE.com"> HyperLink</a> 
<p align="justify" style="font-family:arial; font-size:13px;">BLACK TEXT 
</p> 
</table> 
</table> 
</tr> 
</table> 
</body> 
</html>

來源

2013-12-17 fifamaniac04

您標記爲JavaScript - 您的JavaScript在哪裏？ –

感謝您指出miss標籤，但您能否提供有關該問題的任何反饋？謝謝 ... – fifamaniac04

你在做的電子郵件？您需要在您使用表中的縮進，否則，它只是變得一團糟：

<!DOCTYPE html> 
<html> 
    <body> 
     <table height="100" width="325"> 
      <tr> 
       <td height="100" width="120"><img align="top" src="myPicPath.png" height="100" width="120" style="display: block;"></td> 
       <td height="100" width="205"> 
        <table height="25" width="205" style="margin-top:-20px"> 
         <tr><td><span style="color:#A0A0A0; font-family:arial; font-size:12px;"> GREY_TEXT:</span> <span style="color:blue; font-family:arial; font-size:12px;">BLUE_TEXT</span></td></tr> 
         <tr><td><a style="font-family:arial; font-size:15px;" target="_blank" href="http://SOMESITE.com"> HyperLink</a></td></tr> 
         <tr><td><span style="color:#A0A0A0; font-family:arial; font-size:12px;"> SOME_TEXT | DATE</span></td></tr> 
         <tr><td><span style="font-family:arial; font-size:13px;">BLACK TEXT</span></td></tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2013-12-17 03:38:28 Zac

如果我的理解是正確的，你想你的形象總是擁抱你的左邊欄，頂部無論多久你的右欄是。這jsfiddle顯示此行爲：http://jsfiddle.net/smy8z/

關鍵是中包含您的圖像style="vertical-align: top;"。

我會建議以完全不同的方式去做這件事。使用表格進行佈局，使用屬性進行定位以及使用內聯樣式進行樣式設計在現代網絡中都是不合標準的做法。通常情況下，您會使用對您的內容最有意義的HTML元素，因此表格將用於表格式數據（請參閱Excel電子表格）。過去，您會將樣式和佈局規則保存在單獨的CSS文件中。這將分開您的責任（HTML中的總體佈局，CSS中的特定樣式），並保持HTML清晰易讀。

來源

2013-12-17 03:41:41 Steve

使用iframe格式化html表格內容

回答

相關問題