html - 这是一张 table 吗？

Question

<分区>

Answer 1

首先，感谢您提出一个很好的问题!

这显然是一个表格，而不是表格。它的布局并不重要，表格的要点是指定您正在显示有助于制表的数据(将其视为简单列表的组合。)您的用例这里是为了收集输入，它的布局是否有点'a sort'a 看起来像一个表单并不重要。

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

( tl;dr )

首先，一些标记:

<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 的任何选择器。现在，有多种方法可以解决这个问题，各有利弊。您可能会遇到一些人，他们对这一领域的最佳实践有这样或那样的看法，但老实说，这主要归结为对您有用的东西。我想说的是，只要您保持人类和机器人都可以访问标记——这确实意味着要尝试保持语义并利用 microformats。 ，除此之外——然后在上面添加任何额外的樱桃来完成工作就可以了!

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

<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 类来对我们的内容进行分类，并将 css 中的 label 选择器替换为.form-row。现在有很多方法可以解决这个问题，我希望您花一些时间来尝试一下，因为有很多东西需要学习(语义、微格式、CSS 实践等)

希望这对您有所帮助!