使用表格来设置表格样式并左右对齐两列是否合适[重复]答案

【问题标题】：Is it appropriate to use a table for styling a form and aligning two columns left and right [duplicate]使用表格来设置表格样式并左右对齐两列是否合适[重复]
【发布时间】：2014-07-20 14:48:07
【问题描述】：

我的问题可能听起来有点愚蠢，但我想了很多。由于以下几个原因，我学会了不要将表格放入表格中： - 响应式设计问题 - 甚至 Bootstrap 都建议使用 div - 将表格用于真正的“表格事物” - 不要用表格设计

就我而言，我想使用表格，因为我想让表格更好地阅读和使用。我想将标签放在左列中，将输入字段放在右列中，并将左列右对齐，右列左对齐，以便标签在同一行并彼此靠近。我明确不想将它们放在另一个下面，因为它更难阅读。 **使用我的解决方案，表格列会自动占用他们需要的空间。以 twitter bootstrap 为例，我需要使用“col-xs-6”之类的类来说明列的宽度。此外，有时所有标签都很短，所以我不需要那么多列，有时其中一些很长，所以我需要更多列。但就我而言，我不想定义这个。它应该自动发生。

所以我的问题是：是否可以在表单中使用表格以便符合 Web 标准和最先进的技术？对我来说对齐（左列右，右列左）非常重要，不要使用 JavaScript。如果没有，还有其他选择吗？

[编辑] 我在这里放了一张图来解释我的问题。不得不说：我正在寻找没有javascript的解决方案

http://i.stack.imgur.com/75Ehm.png

【问题讨论】：

否 - 这不是表格数据
stackoverflow.com/questions/1395514/…
你有没有遵循这条轨迹的表格的解决方案？ i.stack.imgur.com/75Ehm.png

标签： html

【解决方案1】：

浮动<div>s（使用CSS，例如float: left）来创建您的表单布局。还将您的表单嵌套在 <fieldset> 中。

【讨论】：

如果没有 javascript，这样的事情可能吗？ i.stack.imgur.com/75Ehm.png
尝试第二个解决方案。您可以尝试应用 CSS min-width 来对齐标签列。该列应该为较长的文本调整大小，但对于较短的标签保持内联。

【解决方案2】：

这段代码通过了 W3C 验证器的验证，因此使用表格设计表单对于 web 标准来说是可以的，但它不是一个好的 UI 实践。

    <!DOCTYPE html>
    <html>
    <head>
    <title>For in the table</title>
    </head>
    <body>
        <form>
        <table>
            <caption>Form in the table</caption>
            <tr>
                <td><label for="input1">Input1</label></td>
                <td><input type="text" id="input1"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="Submit" value="OK"></td>
            </tr>
        </table>
        </form>
    </body>
    </html>

您可以使用 div 或其他容器和类似的 css 内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Froms with divs</title>
<style type="text/css">
form {
    margin: 0 0;
    padding: 0 0;
    border: 1px solid black;
    width: 300px;
}
input, textarea {
    width: 50%;
}
label {
    vertical-align: top;
    width:100%;
    display: inline-block;
    text-align: right;
}

</style>
</head>
<body>
    <form action="some-action">
        <label for="longInput">Long Input Label<input type="text" id="longInput"></label>
        <label for="inputLabel">Input Label<input type="text" id="inputLabel"></label>
        <label for="inputLabel">Short<textarea rows="" cols="" id="short"></textarea></label>
    </form>
</body>
</html>

如下图所示：

【讨论】：

我老了。但是你能帮我找到一个好的 ui 实践的方法吗？我在我的原始帖子中放了一个图片链接。我的你可以看看
为我的答案添加了可能的解决方案
您的解决方案中的问题是，您定义了输入的宽度。我不想定义这个。我希望它动态变化。