Question

有些人认为table是魔鬼的产卵。其他人主要使用它来格式化他们的网站。你什么时候在桌子上画线？你什么时候觉得自己在滥用它们？

我个人只使用表来显示数据，在大多数情况下需要一个表。不过，我碰到了一堵砖墙。我需要对齐两个文本框，你会使用表吗？

我正在考虑做这样的事情：

<table style="border: 0; border-collapse: separate; border-spacing: 10px; margin: 10px auto;">
    <tr>
        <td><label for="username">Username</label></td>
        <td><input type="text" name="username" placeholder="Username"></td>
    </tr>

    <tr>
        <td><label for="password">Password</label></td>
        <td><input type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"></td>
    </tr>

    <tr>
        <td></td>
        <td><input type="submit" name="submit" class="btn btn-large btn-info" style="float: right"></td>
    </tr>
</table>

请原谅内联CSS，我在这个例子中使用它。

你会在那里画线吗？我是否穿过这条想象的线？你会做什么？

Answer 1

为了对齐事物，我会使用<div>元素，如果失败，则使用绝对定位。同时在display:inline-block元素上尝试div。他们为什么不排队？你有什么尝试？表格从不用于格式化。这是一个糟糕的做法，表格不是为此而设计的。只有在显示表格数据时才使用表格。否则见上文。

Answer 2

表应该用于表示表格数据。 Div是分区或部分，应该用于对块元素进行分组。当您想要对内联元素进行分组时，跨距非常有用。

Answer 3

我个人认为在表格方面使用表格进行布局是可以的，特别是在一些超级复杂形式的情况下 - 例如：http://www.wolfhair.com/consultation-options/

我的理由是，如果输入到文本字段的数据是实际文本而不是文本字段，那么实际上它似乎是表格数据。事实上，如果您要存储此信息，它将被放置在类似于结构的表中，以便稍后从中拉出。

作为演示，举个例子你的例子。如果填写完毕，文本字段是实际数据结果。

<table border="1">
    <tr>
        <td><label for="username">Username:</label></td>
        <td>MyUsernameRox</td>
    </tr>

    <tr>
        <td><label for="password">Password:</label></td>
        <td>M0stSecurePasswordEv3r</td>
    </tr>
</table>

http://jsfiddle.net/sGq2Q/

除了使用它来组织和安排表格外，它不应该用于布局。

何时使用以及何时不使用表格？

3 个答案: