Question

使用div创建表格效果的最佳方法是什么，比如这个html表：

<table width="100%">
    <tr>
        <td align="right">
            Name: 
        </td>
        <td align="left">
            Jennifer
        </td>
    </tr>
    <tr>
        <td align="right">
            Age: 
        </td>
        <td align="left">
            19
        </td>
    </tr>
</table>

无论我怎么做，我的问题始终是文本对齐。所有这些都需要在另一个具有特定宽度并且向右浮动的div中，并且该表将位于“居中”内部。提前谢谢。

Answer 1

使用表格。

如果没有破坏，请不要修理它。使用对您尝试显示的数据有意义的元素。在这种情况下，表格非常有意义。

Answer 2

根据您的示例，定义列表是另一个语义选项：

<dl>
  <dt>Name</dt>
  <dd>Jennifer</dd>
  <dt>Age</dt>
  <dd>19</dd>
</dl>

然后，您可以使用display: table-cell来提供数据表，例如look＆amp;行为。

Answer 3

我会像这样做HTML：

<div class='lefty'>Name:</div><div class='righty'>Jenifer</div>
<div class='lefty'>Age:</div><div class='righty'>19</div>

和CSS这样：

div{
    width:50%;
    float: left
}
.lefty{
    text-align: right;
}
.righty{
    text-align:left;
}

小提琴：http://jsfiddle.net/SbXdG/

用CSS制作表格

3 个答案: