Форматирование содержимого HTML-таблицы для использования с iframe

Question

Форматирование содержимого HTML-таблицы для использования с iframe

0

Я имею 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>

fifamaniac04 17 дек. 2013, в 03:46

Источник

0

Вы пометили JavaScript - где ваш JavaScript?
Sterling Archer 17 дек. 2013, в 02:32
0

спасибо за указание на тэг miss, но можете ли вы дать какие-либо отзывы по этому вопросу? Спасибо ...
fifamaniac04 17 дек. 2013, в 03:15

Теги:

html

css

iframe

2 ответа

Ещё вопросы

Вы пометили JavaScript - где ваш JavaScript?
спасибо за указание на тэг miss, но можете ли вы дать какие-либо отзывы по этому вопросу? Спасибо ...

Zac · Answer 1 · 2013-12-17T02-04-00.000Z

Вы делаете для электронной почты? Вам нужен правильный отступ, где вы используете таблицу, иначе это просто беспорядок:

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

Steve · Answer 2 · 2013-12-17T01-48-00.000Z

Если мое понимание правильное, вы хотите, чтобы ваше изображение всегда обнимало верхнюю часть вашего левого столбца, независимо от того, как долго ваш правый столбец. Это jsfiddle показывает это поведение: http://jsfiddle.net/smy8z/

Ключ: style="vertical-align: top;" в <td> который содержит ваше изображение.

Я бы посоветовал об этом по-другому. Выполнение макета с таблицами, позиционирование с атрибутами и стилизация со встроенными стилями - это нестандартные методы в современной сети. Как правило, вы должны использовать HTML-элементы, которые наиболее подходят для вашего контента, поэтому таблицы будут использоваться для табличных таблиц (подумайте о электронной таблице Excel). В прошлом вы сохранили бы свои стили и правила размещения в отдельном файле CSS. Это отделит ваши обязанности (общий макет в html, конкретный стиль в css) и сохранит ваш HTML в чистоте и разборчивости.