iframe漂浮顶部和右侧

Question

我正在制作一个小的HTML页面，以包含在我姐姐的“演示文稿”（学校）中。我创建了一个包含多行的表格，第一列有一个链接，它的iframe为target="ifr"。这些链接包含对元素的解释。

我想包括右边那个iframe来使页面更加花哨，但我越来越困难，努力使IFRAME浮动正确的，而且向上。

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; 
}