HTML无表表单

我有一个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垂直对齐,这意味着第一个“列”必须拉伸到所有“行”的最宽宽度。

我不想显式指定任何列的宽度

我读了好几页,上面写着 <表& gt; 对于布局,我同意一些观点,但我认为添加一堆div来模仿一张桌子也是有点愚蠢的。我的意思是,和一个班上的一系列女主角 clear:left 在里面更难阅读。

无论如何,我真的很想“看到光明”。

更新:

作为对答案的回应,我认为对我来说最好的实现方式是:

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>