html - iframe float 在顶部和右侧

Question

我正在制作一个小 html 页面以包含在我姐姐的“演示文稿”(学校)中。我创建了一个包含多行的表格，第一列有一个链接，其 target="ifr" , 内嵌框架。这些链接包括元素的解释。

我想在右侧包含该 iframe 以使页面更漂亮，但我遇到了麻烦，试图使 iframe 向右和向上 float 。

iframe 代码:

    <iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

表格:

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>

<tr valign=top> <!-- category-->
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Denominazione</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Gene</B></FONT>
    </td>
    <td align="center">
        <FONT COLOR="#800000" FACE="TimesNewRomanPSMT, sans-serif" SIZE=3><B>Origine</B></FONT>
    </td>
</tr>
<tr valign=top> <!-- first row, there are 12 of these-->
    <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a></td>
    <td align="center">17q23</td>
    <td>Ereditarietà autosomica dominante</td>
</tr>

这是我得到的:

这就是我想要的:

我想让它们成为 <ul> 的一部分并使用 display:inline ，但我只有一些 html/css 基础。提前致谢

Answer 1

Demo ，也是全屏结果Demo

更新:删除了非 html5 valign

我建议不要使用 <font>这是很古老的方式，而不是通过 css 样式。

html

<table border=1 bordercolor="#000000" cellpadding=15 cellspacing=0>
    <tr>
        <!-- category-->
        <td align="center">Denominazione</td>
        <td align="center">Gene</td>
        <td align="center">Origine</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
    <tr>
        <!-- first row, there are 12 of these-->
        <td><a href="pc.html" target="ifr">Paramiotonia congenita (PC)</a>
        </td>
        <td align="center">17q23</td>
        <td>Ereditarietà autosomica dominante</td>
    </tr>
</table>
<iframe style="float:right;" width="575px" height="800px" id="ifr" name="ifr" src="no-src.html"></iframe>

CSS

td {
    color:#800000;
    font-family:"TimesNewRomanPSMT, sans-serif";
    font-size: 14px;
}
tr {
    vertical-align: top; /* valign=top is not used now */
}
table {
    width: calc(100% - 580px); /* negate the width of iframe also borders */
    float: left;
}