这是一张表吗？ [英] Is this a table?

问题描述

一个经典的web开发口头禅：只使用表格数据表。这是根源在老年人，当表被滥用于每一个可能的布局任务可想象。

虽然我也坚持这个规则，只要有可能，现在，然后布局任务，我只是不能解决没有表 - 或任务跨越在表格数据和非表格数据之间的边界。

这种情况是完全古典的：

 <$ c $ ...> [...] 
年龄：[...] 
工作：[...] $ p> 
 
 
 [...]是文本框。这是表格数据吗？我应该使用表格来排列这些标签和文本框，还是使用< div>  s和< span>  s？该表将使得更容易提供适当的垂直对齐并帮助排列未知宽度的标签。 
 
 
 
如果我们这样看呢？
 字段|价值
 --------------- 
名称：[...] 
姓氏：[...] 
年龄：[...] b作业：[...] 
  
 
 
解决方案
一个好的问题！
 
 
 
这显然是一个表单，而不是一个表。它的布局并不重要，表的要点是指定你是显示数据，它自己表格化（认为它是一个复杂的简单列表。）你的用例这里是收集输入，它的布局是否'a sort'a看起来像一个窗体。
 
 
 
当然，如果你不关心语义，这些都不重要;在这种情况下，我说使用任何你想要的。无论如何，有很多示例，并且框架可以做你想要的，但是自己也不难做到。事实上，它可以非常像布置一张桌子，如果你愿意的话。 
 
 
 
（ tl; dr < a>）
 
 
 
首先，一些标记：
 < form> ; 
< label>< span>名称：< / span>< input name =nametype =text>< / label& 
< label>< span>姓氏：< / span>< input name =surnametype =text>< / label& 
< label>< span>年龄：< / span>< input name =agetype =text>< / label> 
< label>< span>工作：< / span>< input name =jobtype =text>< / label& 
< / form> 
  
这不是特别棘手的标记。我没有添加任何类，你可以看到，我会得到，在一秒钟。但首先，我想告诉你，没有任何额外的标记，如何把它变成你要求的布局：
  form {
 display：table; 
} 
 
标签{
 display：table-row; 
} 
 
 label> * {
 display：table-cell; 
} 
 
 label> ：first-child {
 text-align：right; 
 padding-right：10px; 
} 
  
真的。通过使用css和表， table-row 和 table-cell 头的显示值，它很简单，创建一个表像布局，而不必牺牲语义标记。这个css不会改变你的表单的语义或可访问性，它只是提供了线索到浏览器如何应该出现的东西。现在，您还要问为此添加标题。将标记更改为以下标记将不太适用：
 < form> 
< div> 
< span>栏位< / span>< span>值< / span> 
< / div> 
< label>< span>名称：< / span>< input name =nametype =text>< / label& 
< label>< span>姓氏：< / span>< input name =surnametype =text>< / label& 
< label>< span>年龄：< / span>< input name =agetype =text>< / label> 
< label>< span>工作：< / span>< input name =jobtype =text>< / label& 
< / form> 
  
这是因为我们的样式规则不包括div的任何选择器。现在，有很多方法可以固定，具有各种不同的利弊。你可能会遇到有一个或另一个人说这个领域的最佳实践的人，但老实说，它大多来自对你有用的。我会说，只要你保持标记可供人类和机器人访问 - 这的确意味着试图保持语义，并利用微格式，其他事情 - 然后添加任何额外的樱桃顶部，以完成工作是A-OK！
 
 
 
无论如何，这里有一种方法，让你的创意果汁流动。首先，标记：
 < form> 
< div class =form-row> 
< span>栏位< / span>< span>值< / span> 
< / div> 
 
< label class =form-row>< span> Name：< / span>< input name =nametype =text>< / label> ; 
< label class =form-row>< span>姓氏：< / span>< input name =surnametype =text>< / label& 
< label class =form-row>< span>年龄：< / span>< input name =agetype =text>< / label& 
< label class =form-row>< span>工作：< / span>< input name =jobtype =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; 
} 
  
正如你可以看到的那样， code> form-row 来分类我们的内容，并用替换css中的标签选择器。 form-row 。现在有很多方法可以使用它，我希望你花一些时间来玩它，因为有很多东西要学习（语义，微格式，css实践等）。
 
 
 
希望这有助于！
 
A classical piece of web development mantra is: "Only use tables for tabular data". This has its roots in the elder days, when tables were abused for every possible layout task imaginable.

While I too hold to this rule whenever possible, there are now and then layout tasks which I just cannot solve without a table - or tasks that straddle on the boundary between "tabular data" and "non-tabular data". This is one of them.

The situation is a totally classical one:
   Name: […]
Surname: […]
    Age: […]
    Job: […]
The […] are meant to be textboxes. Is this tabular data? Should I use a table for arranging these labels and textboxes or some unholy mashup of <div>s and <span>s? The table would make it easier to provide the proper vertical alignments and help lining up labels of unknown widths. But would it be "proper", or just another "hack that floats my boat"?

And what if we look at it like this?
 Field | Value
 ---------------
   Name: […]
Surname: […]
    Age: […]
    Job: […]

解决方案
First of all, thanks for a good question!

This is obviously a form, not a table. The layout of it doesn't really matter, the point of a table is to designate that you are displaying data that lends itself to tabulate (think of it as a composite of simple lists.) Your use case here is to gather input, it doesn't matter whether its layout kind'a sort'a looks like a form.

Of course, none of this matters if you don't really care about semantics; in which case I say use whatever you want. In any event there are plenty of examples and frameworks out there that'll do what you want, but it's not particularly difficult to do by yourself either. And in fact, it can be very much like laying out a table, if you so wish. I'll walk you through it.

(tl;dr)

First, some markup:
<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>
This is not particularly tricky markup. I've not added any classes as you can see, and I'll get to that in a second. But first, I wanted to show you, without any extra markup, how to turn this into a layout like that you requested:
form {
  display: table;
}

label {
  display: table-row;
}

label > * {
  display: table-cell;
}

label > :first-child {
  text-align: right;
  padding-right: 10px;
}
That's it really. By using css and the table, table-row and table-cell headers for the display values, it's dead simple to create a table like layout without having to sacrifice semantic markup. This css doesn't change the semantics or accessibility of your form, it just provides clues to the browser how it should lay things out. Now, you also asked about adding a header to this. Changing the markup to the following, will unfortunately not really work:
<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>
This is because our styling rules doesn't include any selectors for the div. Now, there are a number of ways this could be fixed, with various different pros and cons. You'll probably run into people that have one thing or another to say about best practices in this area, but honestly it mostly comes down to what works for you. I'd say so long as you keep the markup accessible for humans and robots alike – this does mean trying to stay semantic and make use of microformats, amongst other things – then adding whatever extra cherries on top to get the job done is A-OK!

Anyway, here's one way of doing it, to get your creative juices flowing. First, the markup:
<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>
And then the css:
form {
  display: table;
}

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

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

.form-row > :first-child {
  text-align: right;
  padding-right: 1em;
}
As you can see all that had to change was that we introduced the class form-row to classify our content such, and replaced the label selectors in the css with .form-row. Now there are plenty of ways to go with this and I hope you take some time to play around with it, because there's plenty to learn (semantics, microformats, css practices etc.)

Hope this helps!

                        
这篇关于这是一张表吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！