格式化用于iframe的html表格内容_Html_Css_Iframe

格式化用于iframe的html表格内容

html css iframe

格式化用于iframe的html表格内容,html,css,iframe,Html,Css,Iframe,我有一个iframe，它的高度是100px，宽度是450px。我正在尝试格式化html表，使其具有以下布局： _______ | | GREY_TEXT: BLUE_TEXT | | Hyperlink | img | SOME_TEXT ~ DATE | | BLACK_TEXT ------- 其中img为100高80宽我遇到的问题是，绿色文本有时会在iframe中的图像上方结束，这取决于超链接的长度。黑色文本的长度应该不重要，因为它可以被剪掉，我不会放垂直卷轴

我有一个iframe，它的高度是100px，宽度是450px。我正在尝试格式化html表，使其具有以下布局：

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

其中img为100高80宽

我遇到的问题是，绿色文本有时会在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>


灰色文本：
蓝色文本
一些文本日期

黑色文本

你在为电子邮件做什么？在使用表格的地方需要适当的缩进，否则，表格就会变得一团糟：

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


灰色文本：蓝色文本
一些文字日期
黑文

如果我的理解是正确的，那么无论右栏有多长，您都希望您的图像始终位于左栏顶部。此JSFIDLE显示了以下行为：

在包含图像的

中有

style=“vertical align:top；”“

我建议用一种完全不同的方式来处理这个问题。在现代web中，使用表格进行布局、使用属性进行定位以及使用内联样式进行样式设置都是不符合标准的做法。通常，您会使用对内容最有意义的HTML元素，因此表格将用于表格数据（想想Excel电子表格）。在此之后，您将在一个单独的CSS文件中保留样式和布局规则。这将分离您的职责（html中的总体布局，css中的特定样式），并将保持您的html干净易读。

您标记了JavaScript--您的JavaScript在哪里？感谢您指出未标记的标记，但您能否提供有关此问题的任何反馈？？谢谢