Question

我有这张桌子：

<table border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td width="100" height="110"><a href="Frankrijk.html"><img src="Images/Landen/Frankrijk.gif" alt="Frankrijk" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Spanje.html"><img src="Images/Landen/Spanje.gif" alt="Spanje" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Zuid_Afrika.html"><img src="Images/Landen/ZuidAfrika.gif" alt="Zuid Afrika" width="100" height="67" border="0"></a></td>
          <td width="30">&nbsp;</td>
          <td width="100" height="110"><a href="Argentinie.html"><img src="Images/Landen/Argentinie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
        </tr>
        <tr>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Frankrijk.html">Frankrijk</a></td>
          <td>&nbsp;</td>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Spanje.html">Spanje</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Zuid_Afrika.html">Zuid-Afrika</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Argentinie.html">Argentinië</a></td>
        </tr>
        <tr>
            <td colspan="7">&nbsp;</td>
        </tr>

        <tr>
          <td height="110"><a href="Chili.html"><img src="Images/Landen/Chili.gif" alt="Chili" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110"><a href="Australie.html"><img src="Images/Landen/Australie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110"><a href="Italie.html"><img src="Images/Landen/Italie.gif" alt="Italië" width="100" height="67" border="0"></a></td>
          <td>&nbsp;</td>
          <td height="110">&nbsp;</td>
        </tr>
        <tr>
          <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Chili.html">Chili</a></td>
          <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Australie.html">Australië</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center"><a href="Italie.html">Italië</a></td>
         <td>&nbsp;</td>
           <td class="detailText" valign="top" nowrap="nowrap" align="center">&nbsp;</td>
        </tr>
    </table>

但我希望将其转换为Div's并将它们全部放在一起。在我将它们更改为Divs的测试中，我使用了以下CSS。

.OverviewContainer{Margin:35px auto;text-align:center;display:inline;margin-left:auto;margin-right:auto;}
.OverviewPicture{width:130px;height:120px;margin-left:auto; margin-right:auto;}
.OverviewText{width:130px;font:12px arial;color:#ffffff;line-height:16px;letter-spacing:.1em;}

Answer 1

忽略这样一个事实，我也认为这是一个相当糟糕的问题，而且很可能只是一个薄薄的隐晦的要求让其他人去做这项工作＆＃34; （正如@meagar所说）很容易回答。另外，正如@Pekka已经提到的，最好将表格用于表格数据。

HTML

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Chili.html">
        <img src="Images/Landen/Chili.gif" alt="Chili">
    </a>
    <a class="OverviewText" href="Chili.html">Chili</a>
</div>

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Australie.html">
        <img src="Images/Landen/Australie.gif" alt="Australie">
    </a>
    <a class="OverviewText" href="Australie.html">Australië</a>
</div>

<div class="OverviewContainer">
    <a class="OverviewPicture" href="Italie.html">
        <img src="Images/Landen/Italie.gif" alt="Italië">
    </a>
    <a class="OverviewText" href="Italie.html">Italië</a>
</div>

CSS

.OverviewContainer{
    float: left;
    overflow: hidden;
    margin-right: 5px;
}

.OverviewPicture{
    width: 100px;
}

.OverviewText{
    display: block;
    margin-top: 10px;
}

如何将此表转换为DIV？

1 个答案: