Question

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

标记变得臃肿，因此下载时间更长，
一次全部呈现一个表（因此可能会延迟加载，直到所有内容都被读取）
可能是无数其他原因。

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

所以我想看看如果没有桌子，人们将如何完成以下任务。

<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垂直排列，这意味着第一个“列”必须延伸到所有“行”的最宽宽度

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

我已经阅读了很多页面，说明<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>

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

Answer 2

如果你想要一个表的精确布局，那么使用'display：table'及其同类。对于旧版本的IE，您可以使用后备版本，并且两全其美。

或者 - 这就是我要做的 - 你可以使用固定宽度标签和浮点数。超宽标签只会换行到下一行。

Answer 3

一般规则是仅使用表格用于表格数据，你可以合理地说这是表格数据，所以我不认为这是一个问题。即使是Head First HTML/CSS book也是如此！

Html无表格形式

3 个答案: