Html 无表格形式

Question

我有一个 html 页面的一部分，我想以类似表格的方式显示它。我一直听说不要使用 <table>布局。我得到了一般推理。

1. 标记变得臃肿，因此下载需要更长的时间，

2. 表格是一次性呈现的(因此它可能会延迟加载，直到所有表格都被读取)

3. 可能有无数其他原因。

我倾向于“不要使用表格作为默认布局方法，但如果有意义就去做”

所以我想看看在没有表格的情况下如何完成以下任务。

<table>
  <tr>
    <td>First Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>Phone Number</td>
    <td><input type="text"/></td>
  </tr>
</table>

所以要求是我想要所有 input s 垂直排列，这意味着第一个“列”必须拉伸(stretch)到所有“行”的最宽宽度

我不想明确指定任何列的宽度

我读过好几页都说 <table> 有多邪恶对于布局，我同意一些观点，但我认为添加一堆 div 来模仿表格也有点愚蠢。我的意思是，有一系列带有 clear:left 类的 div。它更难阅读。

无论如何，我真的很想“见光”。

更新:

作为对答案的回应，我认为对我来说最好的实现是这样的:

css(这基本上要求我只在最顶层的 div 上指定一个类):

div.table
{
    display:table
}

div.table div
{
    display:table-row
}

div.table div div
{
    padding:5px;
    display:table-cell;
}

然后有这样的标记:

<div class="table">
  <div>
    <div>First Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Last Name</div>
    <div><input type="text"/></div>
  </div>
  <div>
    <div>Phone Number</div>
    <div><input type="text"/></div>
  </div>
</div>

Answer 1

A List Apart有一篇关于这个问题的好文章。

他们使用

• <ul></li>
• <Fieldset>和
• <label>

元素——语义上非常正确，甚至源代码看起来也不错。