我应该使用DIV还是TABLE？

Question

我需要构建一个简单的数据表.所以通常我会说让我们使用表格,这就是它们的用途.

然而,这里有一个额外的小技巧,如果你点击"显示",有一个ajax调用,以显示下面的额外数据.这让我想知道,我应该切换到DIV吗？

我知道两者都有可能 - 但我正在努力寻找更清洁,更容易的东西......

(这里的数据是假的)

Answer 1

您回答自己的问题 - 数据是表格式的,具有水平和垂直关系,因此语义正确的标记绝对是一个table.预期的用户界面永远不应该考虑语义选择.

通过tr在具有正确数据的单击元素下插入新元素,您可以轻松,正确地实现show按钮.

考虑到原始标记如下:

<tr>
    <td>1</td>
    <td>Orlando</td>
    <td>Gee</td>
    <td>phone number</td>
    <td><button>show</button></td>
</tr>

然后,您可以在JS中附加所需的新行,每个属性一个:

<tr class="otherbg-and-bold">
    <td></td>
    <td colspan="2">email address</td>
    <td colspan="2">sample@company.tld</td>
</tr>