Question

我目前正在开发一个Web应用程序，我需要以表格方式显示一些字段。例如：

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------- 
etc  
-------------------------------------------------

字段需要对齐（在上面的示例中，“Town”应该正好在'First Name'之下，'Country'应该在'LastName'之下等等）。我正在考虑使用一个html表（并在每个单元格中放置一个fieldname / value），但在我在这个网站上阅读的所有内容之后，看起来我应该使用css，因为我想要显示的数据不是真正的表格。我只是希望它看起来像表格。我找不到用css做这个的简单方法。有什么想法吗？

Answer 1

我认为你对何时使用CSS以及何时使用表格感到困惑。当你拥有那么多数据时，你可能应该使用表格。将实际BOX放在使用CSS的位置是很好的，但从我可以看到的框中的数据应该在表格内。

Answer 2

在这些情况下，使用CSS摸索是一个PITA，我几乎总是建议一个表。正如Scott已经说过的那样，在语义上定义列表是不错的选择：

<dl>
  <dt>First Name</dt><dd>John</dd>
  <dt>Last Name</dt> <dd>Smith</dd>
  <dt>Age</dt>       <dd>26</dd>
  <dt>Town</dt>      <dd>Madrid</dd>
  <dt>Country</dt>   <dd>Canada</dd>
  <dt>Colour</dt>    <dd>Blue</dd>
</dl>

你可以这样设计：

dl {
    margin: 0;
}
dt {
    float: left;
    background: #eee;
    width: 10%;
    margin: 0;
    white-space: nowrap;
    padding: 0.25em;
}
dt:after {
    content: ':';
}
dd {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0.25em;
}

要使每行的X值对齐，您必须明确指定每个元素的宽度，这可能并不总是那么实用。虽然要获得一个新行，您可以使用：nth-child选择器（或使用旧浏览器的属性）并将clear: left;放在其定义中。

Answer 3

这实际上是使用HTML表格的绝佳机会。这正是HTML表的用途。这些数据对我来说非常明显。

Answer 4

从语义上讲，您可能希望使用定义列表。您可以指定dt和dd元素的宽度以将它们对齐，然后将它们浮动到左侧。

Answer 5

我可能会被 table-dancers 杀死这个回复，但简约在开发方面毫无价值。使用<b>标记进行粗体化比使用<strong>更容易。使用<i>进行斜体处理比使用<em>更容易。

在进行布局时，使用诸如表格布局之类的古老方法比使用做正确的事情更容易，并使用语义上正确的标记。

正确的方法并不总是最简单的方式。

话虽如此，选择一个合适的基地开始。这里的一些人建议定义列表，我不一定反对。你几乎可以使用任何列表。

然后使用float和inline-display为块元素设置您喜欢的项目样式。

<ul>
  <li class="fname">
    <label>First Name</label> <input type="text" name="fname" />
  </li>
  <li class="lname">
    <label>Last Name</label> <input type="text" name="lname" />
  </li>
</ul>

然后你可以设置浮动这两个li：

ul.userData {margin:0;padding:0;}
ul.userData li {float:left}

甚至为每个li设置特定的宽度，因为它们有自己的类：

li.fname {width:100px;}
li.fname label {width:50px;margin-right:10px;}
li.fname input {width:40px;}

Answer 6

虽然使用嵌套表是绝对不好的，但是当你想要显示的是一个表时，不要害怕使用它们。每个标记标记都是出于某种原因而创建的，并且为此目的创建了表标记。

如果您想更好地了解标记最佳做法以及如何使用CSS，我不能推荐这本书：

http://www.amazon.co.uk/Bulletproof-Web-Design-Flexibility-Protecting/dp/0321509021/ref=sr_1_1?ie=UTF8&s=books&qid=1234824362&sr=8-1

正是这本书让CSS真的为我点击并改进了我没有尽头的网站标准。

请记住，如果对使用哪个HTML标记有疑问，请考虑其名称以及可能与之相关的内容。

Answer 7

使用表格。表格用于表格数据。

Answer 8

使用表来实现此布局将无法将prentation与内容分开。您的内容是键/值对列表;你希望将它显示为3×X网格的事实并不能使它成为表格。

考虑屏幕阅读器用户试图导航这样的表格;要获得下一个键/值对，他必须决定是向右还是向下。由于元素之间的水平和垂直关系没有区别，他无法做出决定，也会迷失方向，不得不猜测。

有关如何以语义上有效的方式对其进行标记的选项，但我赞成使用无序列表：

<ul class="details">
    <li>First name: John</li>
    <li>Last Name: Smith</li>
    <li>Age: 26</li>
    <li>Town: Madrid</li>
    <li>Country: Canada</li>
    <li>Colour: Blue</li>
</ul>

CSS：

.details
{
    width:600px;
    margin:0;
    padding:0;
}
.details li
{
    float:left;
    width:200px;
    border-bottom:1px solid #333;
    list-style-type:none;
}

如果值可能会换行，您可能需要修复列表项的高度，或清除每三个项的左浮动。

Answer 9

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------------

是否只有一个人以这种方式展示？如果是，那么不，从语义上讲它不是一个表，它是一个列表。

这是我的规则：表格数据是数据，其含义只能通过其坐标知道。

First name             Last Name                   Age
------------------------------------------------------
John                   Smith                        26
------------------------------------------------------
Jane                   Jones                        23
------------------------------------------------------

上表中“23”的含义是什么？它意味着简琼斯的时代，但你只能告诉你如果你知道它在年龄栏下的简琼斯行中，你知道这不是她的房子数量或她在这里工作的年数。或者，当然，约翰史密斯的年龄。

Age: 26

是一个键值对。

Answer 10

我去找桌子。使用<th>表示标题，<td>表示您的详细信息：

<table>
    <tr>
        <th>First Name:</th>
        <td>John</td>
        <th>Last Name:</th>
        <td>Smith</td>
        <th>Age:</th>
        <td>26</td>
    </tr>
    <tr>
        etc.

如何使用css做到这一点

10 个答案: