Я имею iframe высотой 100px и шириной 450px. Я пытаюсь отформатировать таблицу 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>
Вы делаете для электронной почты? Вам нужен правильный отступ, где вы используете таблицу, иначе это просто беспорядок:
<!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>
Если мое понимание правильное, вы хотите, чтобы ваше изображение всегда обнимало верхнюю часть вашего левого столбца, независимо от того, как долго ваш правый столбец. Это jsfiddle показывает это поведение: http://jsfiddle.net/smy8z/
Ключ: style="vertical-align: top;"
в <td>
который содержит ваше изображение.
Я бы посоветовал об этом по-другому. Выполнение макета с таблицами, позиционирование с атрибутами и стилизация со встроенными стилями - это нестандартные методы в современной сети. Как правило, вы должны использовать HTML-элементы, которые наиболее подходят для вашего контента, поэтому таблицы будут использоваться для табличных таблиц (подумайте о электронной таблице Excel). В прошлом вы сохранили бы свои стили и правила размещения в отдельном файле CSS. Это отделит ваши обязанности (общий макет в html, конкретный стиль в css) и сохранит ваш HTML в чистоте и разборчивости.