使用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表格内容

回答

相关问题