html - 列出元素或表格？

Question

我正在创建两个专栏。第一列是一张图片，第二列是一个与图片被点击次数相关的数字(基本上)。所以我需要两个对齐，但我也希望图像彼此对齐以及数字彼此对齐。所以我的问题是，是在表格中执行此操作更好，还是创建两个 div，将列表项放在每个 div 中，然后将它们并排 float ？

如果有更好的方法我是开放的。

选项 1

<div>
    <div style="float:left">
        <ul>
            <li><img></li>
            <li><img></li>
            <li><img></li>
        </ul>
    </div>
    <div style="float:left">
        <ul>
            <li><value></li>
            <li><value></li>
            <li><value></li>
        </ul>
    </div>
</div>

选项 2

<table>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
</table>

我相信有更好的方法可以做到这一点。我认为这些都可以，但似乎应该有更好的东西。特别是因为我将不得不编写一堆 CSS 来将它们全部排列起来并使它们起作用。

最终结果:CSS

img{
float:left;
clear:left;
}

 span{
  clear:right;
  float:right;
}

HTML

<ul>
    <li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
    <li><img /><span>value</span></li>
</ul>

Answer 1

我会在同一个列表项中保留一个包含图像和值的列表，即:

<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>

这样，值将始终位于图像旁边，并且可以直接使用 span 设置样式。

不应该为此使用表格。如果上面的方法不合适我可以给你写一些 jquery 来排列两个列表，但是使用上面的方法 imo 会更整洁。