我想知道是否可以将tables 用于表单。
严格来说，名称/值对是表格数据，不是吗？表单只是用户可自定义的一组名称/值对。那么在这种情况下使用tables 是否正确？还是应该使用带有 CSS 样式的 divs？
【问题讨论】：
标签： css forms html html-table
如果你正在寻找“css 纯度”，你应该使用这样的东西：
<form action="http://localhost/Zoleris/" method="post" accept-charset="utf-8">
<ul class="form">
<li>
<label for="username">Username</label>
<input type="text" id="username" name="username">
</li>
<li>
<label for="password">Password</label>
<input type="password" id="password" name="password">
</li>
<li>
<input type="checkbox" id="remember_me" name="remember_me" >
<label class="checkbox" for="remember_me">Remember my username</label>
</li>
<li>
<a href="forgot.php">Forgot your password?</a>
</li>
<li>
<button type="submit" id="btnLogin" name="btnLogin" class="button positive" style="float:right"><img src="tick.png">Login</button>
<button type="submit" id="btnRegister" name="btnRegister" style="float: left"><img src="cross.png">I need an account!</button>
</li>
</ul>
</form>
【讨论】：
<fieldset> :)
是的，您可以使用表格。 Div 应该替换页面级布局的表格，但不能替换表格。只要它们解决了您的问题，就在页面中使用它们。
【讨论】：
两者都是正确。
我更喜欢使用一些div/li，因为这可以让我做出一些不同的布局，但tables 用于forms 并不令人不悦。
实际上，默认情况下，Django 会为您提供表格格式的表单。
【讨论】：
你可以使用任何你想要的， 只是它是制作html表单布局的新标准，有点像不使用表格标签进行设计的规则，但使用表格显示数据表格（网格）仍然可以
【讨论】：
您可以使用表格。就这么简单。
【讨论】：
Eric，我同意你的观点，表单数据是表格数据，并且在语义上可以存在于表格中。
这是我用于简单数据输入屏幕的方法。
我通常不会使用 div，但可能是有序列表
<ol>...</ol>
因为表单也是一个有序的项目列表。 但是，我发现这种方法很难设置样式。
你可能会得到 50/50 的答案......
【讨论】：
我更喜欢将字段分解为逻辑<fieldset>s，每个<legend>，因为：
这是一个代码示例。请注意，标签的 for 属性允许您单击该标签以将焦点移动到指定的输入（它与 id 属性匹配）。
<form>
<fieldset>
<legend>Wombat Statistics</legend>
<ol>
<li>
<label for="punchstrength">Punch Strength</label>
<input id="punchstrength" name="punchstrength" />
</li>
<li>
<label for="beverage">Favorite Beverage</label>
<input id="beverage" name="beverage" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Questions That Are Too Personal</legend>
<ol>
<li>
<label for="creditcard">What is your credit card number?</label>
<input id="creditcard" name="creditcard" />
</li>
<li>
<label for="gullibility">Did you actually fill that in?</label>
<input id="gullibility" name="gullibility" />
</li>
</ol>
</fieldset>
</form>
对于基本布局，您可以使用以下内容：
label, input, textarea, select {
display: inline-block; vertical-align: top; width: 30%;
}
有关更深入的教程，请参阅 this article。
【讨论】：
display: table-cell，虽然它不是那么简单。
有些人会说是，有些人不会。
这是一种供您决定的方法：如果它确实包含表格数据，那么至少根据 WCAG，它应该有一个汇总属性。摘要属性应描述表格的目的和结构，以使屏幕阅读器用户受益。你能写出这样的属性吗？如果是这样，那么您应该这样做，并将其包括在您的桌子上。如果你不能，那么它可能不是一个真正的表格，你应该寻找另一种布置表格的方式。
【讨论】：
为屏幕阅读器使用带有“for”属性的标签很重要（为了可用性）。
这就是我使用字段集的原因
【讨论】：
表单不是表格数据。
使用 CSS 布局表单元素非常容易，我认为没有任何值得用表格混淆标记的价值。就个人而言，我发现在这一点上，使用 CSS 布置表单比使用表格更容易。例如：
HTML：
<fieldset>
<label for="FirstName">First Name</label>
<input type="text" id="FirstName" />
<label for="LastName">Last Name</label>
<input type="text" id="LastName" />
<label for="Age">Age:</label>
<select id="Age">
<option>18-24</option>
<option>25-50</option>
<option>51-old</option>
</select>
</fieldset>
CSS：
fieldset {
overflow: hidden;
width: 400px;
}
label {
clear: both;
float: right;
padding-right: 10px;
width: 100px;
}
input, select {
float: left;
}
使用该主题的简单变体，您可以制作外观精美、易于使用的表单，这些表单实际上比表格更易于使用。我已经使用了这种基本方法，并将其升级为一些相当复杂的多列数据输入表单，不费吹灰之力。
【讨论】：
A form is tabular - 这完全取决于表单中的数据。你不能把所有表格都扔到一个桶里然后说表格 === 表格
我一直不明白，当定义列表在语义上看起来更合适时，为什么要对表单使用有序列表或无序列表：
<fieldset>
<dl>
<dt><label for="definition">Definition:</label></dt>
<dd><input type="text" name="definition" /></dd>
</dl>
</fieldset>
它们在格式方面可能有点棘手，但对我来说，它总是比绝大多数表单的列表或表格更有意义。
话虽如此，表格对我来说似乎并不适合可编辑的表格数据。
【讨论】：
在成为最大的反表人之后，你可以想象我已经开始意识到最终这并不重要。使用最快的。当然，如果您要嵌套表格，那么您会遇到问题，但通常我想不出更简单的布局表格的方法。在一天结束的时候，客户或访客是否会对您使用的是表格还是列表进行两次抨击？
【讨论】：
表格可以是或感觉是表格的，但表格意味着“表示”以及语义。在表格中标记表格往往会将设计锁定为 2 跨字段/输入布局（假设您不想花时间覆盖表格的 CSS）。此外，如果您尝试考虑手机等小屏幕，您可能必须覆盖样式。
此外，屏幕阅读器会用 “第 1 行，第 1 列，标签，'名称'，第 2 列，输入，'名称'...”来过度宣布此表单，而不是简单地说，“输入，‘名字’……”
我的建议是使用 DIV、FIELDSET 或 UL/LI。这将演示文稿留在了 CSS 的手中，正是它所属的地方。
【讨论】：