3

一个经典的 Web 开发口号是：“仅将表格用于表格数据”。这起源于过去，当时表格被滥用于所有可以想象的布局任务。

虽然我也尽可能地遵守这条规则，但有时我会在没有表格的情况下解决一些布局任务 - 或者跨越“表格数据”和“非表格数据”之间边界的任务。这是其中之一。

这种情况完全是经典的：

   Name: […]
Surname: […]
    Age: […]
    Job: […]

[...] 是文本框。这是表格数据吗？我应该使用表格来安排这些标签和文本框还是<div>s 和<span>s 的一些邪恶混搭？该表格将更容易提供正确的垂直对齐方式并帮助排列未知宽度的标签。但它会是“正确的”，还是只是另一个“让我的船漂浮的黑客”？

如果我们这样看呢？

 Field | Value
 ---------------
   Name: […]
Surname: […]
    Age: […]
    Job: […]
4

5 回答 5

4

首先，感谢一个好问题！

这显然是一个表格，而不是一个表格。它的布局并不重要，表格的重点是指定您正在显示适合列表的数据（将其视为简单列表的组合。）您的用例是收集输入，它它的布局是否有点像一个表单并不重要。

当然，如果您不真正关心语义，这些都不重要。在这种情况下，我说使用你想要的任何东西。无论如何，有很多例子和框架可以做你想做的事，但你自己做也不是特别难。事实上，如果您愿意，它可以非常像布置一张桌子。我会引导你完成它。

( tl;博士)

首先，一些标记：

<form>
  <label><span>Name:</span><input name="name" type="text"></label>
  <label><span>Surname:</span><input name="surname" type="text"></label>
  <label><span>Age:</span><input name="age" type="text"></label>
  <label><span>Job:</span><input name="job" type="text"></label>
</form>

这不是特别棘手的标记。如您所见，我没有添加任何类，稍后我会讲到。但首先，我想在没有任何额外标记的情况下向您展示如何将其转换为您要求的布局：

form {
  display: table;
}

label {
  display: table-row;
}

label > * {
  display: table-cell;
}

label > :first-child {
  text-align: right;
  padding-right: 10px;
}

就是这样。通过使用 css 和table,table-row和table-cell标题作为显示值，创建一个类似于布局的表格非常简单，而不必牺牲语义标记。这个 css 不会改变表单的语义或可访问性，它只是为浏览器提供了如何布局的线索。现在，您还询问了有关为此添加标题的问题。不幸的是，将标记更改为以下内容不会真正起作用：

<form>
  <div>
    <span>Field</span><span>Value</span>
  </div>
  <label><span>Name:</span><input name="name" type="text"></label>
  <label><span>Surname:</span><input name="surname" type="text"></label>
  <label><span>Age:</span><input name="age" type="text"></label>
  <label><span>Job:</span><input name="job" type="text"></label>
</form>

这是因为我们的样式规则不包括 div 的任何选择器。现在，有很多方法可以解决这个问题，各有利弊。您可能会遇到对这一领域的最佳实践有不同看法的人，但老实说，这主要取决于什么对您有用。我想说，只要你让人类和机器人都可以访问标记——这确实意味着试图保持语义并利用微格式等——然后在上面添加任何额外的樱桃来完成工作是 A-好的！

无论如何，这是一种方法，可以让您的创意源源不断。首先，标记：

<form>
    <div class="form-row">
      <span>Field</span><span>Value</span>
    </div>
  
    <label class="form-row"><span>Name:</span><input name="name" type="text"></label>
    <label class="form-row"><span>Surname:</span><input name="surname" type="text"></label>
    <label class="form-row"><span>Age:</span><input name="age" type="text"></label>
    <label class="form-row"><span>Job:</span><input name="job" type="text"></label>
</form>

然后是CSS：

form {
  display: table;
}

.form-row {
  display: table-row;
}

.form-row > * {
  display: table-cell;
}

.form-row > :first-child {
  text-align: right;
  padding-right: 1em;
}

正如你所看到的，所有必须改变的是我们引入了类form-row来对我们的内容进行分类，并将labelcss 中的选择器替换为.form-row. 现在有很多方法可以解决这个问题，我希望你花一些时间来玩弄它，因为有很多东西要学（语义、微格式、css 实践等）

希望这可以帮助！

于 2013-10-24T16:17:10.230 回答
2

表格数据描述了确定信息的集合形式。Aform不是“表格数据”，它是交互式的，甚至不是网站访问者的真正信息，而是（通常）被发送的信息，因此认为将可变表格视为“表格”是不正确的-数据。” （再说一次，它真的取决于用法，但我假设你的意思是实际和语义目的中的形式）。

至于样式样式的实践，我通常倾向于使用divs 和ul li组合，因为form元素实际上是信息列表。它甚至带有（非常有限，但仍然）一些格式选项，例如fieldset,legend等。我也会考虑研究这些选项。

然后是力量的另一面（不一定是黑暗面，只是替代面），语义虽然很重要，但不应该变成宗教学科。如果tables 为forms 工作，那就这样吧。您不能将一组语义规则应用于每种情况。最近我发现自己经常这样说，但我会再说一遍，每种情况都不同。

于 2013-10-24T15:08:44.220 回答
1

好吧，使用table与否取决于，但如果你要设计一个form，使用table元素并不是唯一可以完美设计它的东西，如果你愿意，只需使用一个ul元素，label看看你在没有table或的情况下设计相同的东西有多完美div

演示

ul {
    margin: 50px;
}

ul li {
    margin-bottom: 10px;
    font-family: Arial;
}

ul li label {
    display: inline-block;
    width: 100px;
}

事实上，您可以通过float为您的元素li分配一个 fixed来使用，这将导致一个两列，增加宽度并使其成为三列，所以您不需要在这里。widthulformtable

于 2013-10-24T15:04:17.157 回答
1

您提供的示例不需要表格......并且不需要使用 div 的“邪恶混搭”。

<div>
    <label for="x"></label>
    <div class="value">
        <input id="x" type="text">
    </div>
</div>
<!-- rinse, repeat -->

CSS：

label {
   min-width: 8em; /* or whatever makes sense */
   display: inline-block;
   text-align: right;
}

.value {
   display: inline-block;
}
于 2013-10-24T15:04:25.117 回答
1

虽然我也尽可能遵守这条规则，但有时我会在没有表格的情况下解决一些布局任务

表格元素有一些非常酷的布局属性，是的，有时需要这些属性。在这些情况下，CSS 能够将元素设置为像各种表格元素一样显示，同时保持代码在语义上正确，因为您实际上不会使用表格元素。

这包括诸如display: table; display: table-cell;,display: table-row;

就您的示例而言..表格数据用于向用户显示信息..在表格内放置输入或文本区域在语义上是不正确的。但是，如果您要使用相同的格式，并且只显示预先存在的数据，我会说表格是可以接受的。

这种格式布局可以很容易地用 css 制作，使用来自浮动的任何东西，display: inline-block;或者上面提到的表格显示属性。

于 2013-10-24T15:05:54.883 回答