如何将此表转换为 DIV？ [关闭]答案

【问题标题】：How can I convert this table to DIV's? [closed]如何将此表转换为 DIV？ [关闭]
【发布时间】：2012-12-09 03:26:02
【问题描述】：

我有这张桌子：

<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 并将它们全部放在一起。在我将它们更改为 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;}

【问题讨论】：

你为什么要把这张看起来不错的桌子变成div汤？不是表格数据吗？
您的问题在哪里？这个任务的哪一部分给你带来了麻烦？如果你想把它变成 div，就这么做。开始编写标记。如果您遇到困难，请告诉我们。
摆脱这些古老的属性：valign="top" nowrap="nowrap" align="center"。现在是 2012 年，我们有 CSS。
呃。支持者，加油。这不是一个问题，甚至没有一个暗示的问题，而是非常本地化的定义。这应该被关闭，而不是被赞成。这是一个隐晦的要求，让其他人为他做这项工作。
@Pekka：我不知道“看起来不错”的桌子。我没有看到任何表格语义。

标签： html css html-table

【解决方案1】：

忽略这样一个事实，即我也认为这是一个相当糟糕的问题，并且很可能只是“让别人做这项工作的隐秘请求”（正如@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;
}

【讨论】：

反对者愿意发表评论吗？这个答案有什么具体问题吗？