Css 表格是否可以使用？还是使用div更为正确？

我想知道在表单中使用

table

s是否可以接受

严格地说，名称/值对是表格数据，不是吗？表单只是一组用户可自定义的名称/值对。那么在这种情况下使用

表

s正确吗？或者我应该使用CSS样式的

div

s吗？

如果您正在寻找“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>

用户名


密码


记得我的用户名吗




登录
我需要一个帐户！

是 是的，你可以用桌子。Div应该替换页面级布局的表，但不是表。只要它们解决了您的问题，就在页面中使用它们。

两者都是正确的

我倾向于使用一些

div

/

li

，因为这允许我进行一些不同的布局，但是

表单的
表格
不受欢迎

实际上，默认情况下，Django提供了表格式的表单。
您可以使用任何您想要的，
这只是因为它是制作html表单布局的一个新标准，有点像一条规则，不使用表标记进行设计，但使用表来显示数据表（网格）仍然是可以的。
您可以使用表。就这么简单。
埃里克，我同意你的观点，表单数据是表格数据，语义上可以存在于表中

这是我用于简单数据输入屏幕的方法

我一般不使用div，但可能使用有序列表

<ol>...</ol>

。。。

因为表单也是一个有序的项目列表。
然而，我发现这种方法很难形成风格

您可能会得到50/50的答案……
试试字段集
我更喜欢将字段分解为逻辑的
s，每个字段有一个
，因为：


代码不那么凌乱
默认格式是用户友好的（我特别喜欢图例的显示方式）
使用CSS很容易设计样式

下面是一个代码示例。请注意，标签“
for
属性”允许您单击该标签以将焦点移动到指定的输入（它与
id
属性匹配）

有关更深入的教程，请参阅。
有些人会说是，有些人会说否

这里有一种方法供您决定：如果它确实包含表格数据，那么至少根据WCAG，它应该有一个summary属性。summary属性应该描述表格的用途和结构，以方便屏幕阅读器用户。你能写出这样一个属性吗？如果是这样，那么你应该这样做，并把它放在你的桌子上。如果您不能，那么它可能不是一个真正的表，您应该寻找另一种方式来布局表单。
对于屏幕阅读器，使用带有“for”属性的标签是很重要的（为了可用性）

这就是我使用字段集的原因，表单不是表格数据

使用CSS布局表单元素非常容易，我看不出任何值得用表混淆标记的价值。就我个人而言，我发现在这一点上，使用CSS布局表单比使用表格更容易。例如：

HTML:

使用该主题的简单变体，您可以制作出外观美观、易于访问的表单，这些表单实际上比表更易于使用。我使用了这一基本方法，并将其升级为一些相当复杂的多列数据输入表单，不用担心。
我一直不明白，当定义列表在语义上更合适时，为什么要对表单使用有序或无序列表：

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>


定义：

在格式方面，它们可能有点棘手，但对于绝大多数表单来说，它总是比列表或表格更有意义

话虽如此，对于可编辑的表格数据，表格似乎并不适合我。
在成为最大的反表格人士之后，你可以想象我最终开始意识到这并不重要。用最快的。当然，如果你是嵌套表，那么你有一个问题，但一般来说，我想不出一个更容易的方式来布局形式。在一天结束时，客户或访客是否会对您使用的是表格还是列表发出两声嘘声
 表单可以是或感觉上是表格，但表格意味着一种“表示”和语义。在表中标记表单往往会将设计锁定为两个交叉的字段/输入布局（假设您不想花时间覆盖表的CSS）。此外，如果您试图考虑手机等小屏幕，则可能必须覆盖样式

此外，屏幕阅读器将以“第1行第1列标签‘名称’、第2列输入‘名称’…”而不是简单的“输入‘名称’…”来宣布此表单

我的建议是使用div、fieldset或ULs/LIs。这就让CSS掌握了演示文稿的具体位置。
可以接受吗？当然，因为它起作用了。然而，这不是桌子的用途。表单不是表。我的大多数表单都有一列标签，后跟一列输入字段。我们在这里可能达成了一致。我的意思是，我不认为大多数表单都应该是表格，只有那些具有类似表格的外观的表单。如果表单不是表格，它们是什么？只要看一张1040税单。这是一个表。重复的和相关的。我曾经用一个表来布置我的表单，但我无法得到要编译的HTML。我曾经用一个表来布置我的表单，但我无法得到要编译的HTML。再来？什么？不完全是复制品。我问的是什么是正确的，而不是什么是最简单的。“名称/值对是表格数据，不是吗？”说“这个标签是用于那个输入的”，而不仅仅是“这些东西在一行上”。为什么是有序的lis
label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

<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>

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>