Question

假设我有一个包含6个键和6个值的键值列表。我希望以类似于表格的方式（演示文稿）在HTML中呈现这些键值对，尽管它们不一定是表格数据。因此，建议不要使用HTML <table>标记，原因有两个：

应该将演示文稿与数据分开。
<table>标记不得用于表示目的，仅用于表格数据。

无论如何，基本的想法是非常简单地呈现这些值，如下所示：

enter image description here

使用HTML / CSS和<table>标记可以很容易地实现这一点。提供示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Test 1</title>   
    <style type="text/css">

    table {
        width: 300px;
        border: solid 1px black;
        text-align: center;
    }

    </style>
</head>

<body>

<table>
    <tr><td>Key 1</td><td>Val 1</td><td>Key 4</td><td>Val 4</td></tr>
    <tr><td>Key 2</td><td>Val 2</td><td>Key 5</td><td>Val 5</td></tr>
    <tr><td>Key 3</td><td>Val 3</td><td>Key 6</td><td>Val 6</td></tr>   
</table>

</body>

</html>

此外，当 ZOOM （许多浏览器中的常见功能）设置得更高时，所有行都保持不变，因为用户会直观地期望： enter image description here

此类结构的常见无表格设计是通过CSS float样式以及<ul>和<li>元素的组合。

此方法的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Test 1</title>   
    <style type="text/css">
    .table {
        width: 300px;
        border: solid 1px black;
    }

    .table ul {
        float: left;
        list-style: none;   
        padding-left: 0px;  
    }

    .table ul li {
        width: 75px;
        text-align: center;
        margin: auto;       
    }

    .clear {
        clear: both;    
    }

    /* For modern browsers */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
    }

    .cf:after {
        clear:both;
    }

    /* For IE 6/7 (trigger hasLayout) */
    .cf {
        zoom:1;
    }


    </style>
</head>

<body>


<div class="table cf">
    <ul>
        <li>Key 1</li>
        <li>Key 2</li>
        <li>Key 3</li>
    </ul>   

    <ul>
        <li>Val 1</li>
        <li>Val 2</li>
        <li>Val 3</li>
    </ul>   

    <ul>
        <li>Key 4</li>
        <li>Key 5</li>
        <li>Key 6</li>
    </ul>   

    <ul>
        <li>Val 4</li>
        <li>Val 5</li>
        <li>Val 6</li>
    </ul>
</div>


</body>

</html>

按规定工作，在当前浏览器中 ZOOM 也可以使用。（除非在IE6中，文本缩放会推动周围的一切，这是一团糟。）

有很多事情让我觉得不直观：

需要更多CSS，尤其是对于clearfix
理想情况下，对于辅助功能，您需要按顺序显示每个键，然后是每个值，此处您可以获得3个键，3个值，3个键，3个值。这使得在没有CSS的情况下渲染此选项看起来很奇怪，而没有CSS的表格仍然有意义。

所以基本上，问题归结为：因为表格能够以表格样式呈现信息，所以为什么在呈现非表格数据时尝试使用<ul>和复杂的浮点数以及其他CSS技巧来模仿相同的样式以表格式的方式？从努力摆脱所有HTML中的<table>到这里的主要好处究竟是什么？

修改我知道这有点偏离原始问题，有几个答案建议使用<dl>使其在语义上更准确。我同意。因此，该方法的示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Test 1</title>   
    <style type="text/css">
    .table {
        width: 300px;
        border: solid 1px black;
    }

    .table dl {
        float: left;
        padding-left: 0px;  
        width: 150px;
    }

    .table dl dt, .table dl dd {
        width: 75px;
        text-align: center;
        float: left;
        margin: 0px;
    }

    /* clear fix is below */
    /* For modern browsers */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
    }

    .cf:after {
        clear:both;
    }

    /* For IE 6/7 (trigger hasLayout) */
    .cf {
        zoom:1;
    }


    </style>
</head>

<body>


<div class="table cf">
  <dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
    <dt>Key3</dt>
    <dd>Value3</dd>
  </dl>
  <dl>
    <dt>Key4</dt>
    <dd>Value4</dd>
    <dt>Key5</dt>
    <dd>Value5</dd>
    <dt>Key6</dt>
    <dd>Value6</dd>
  </dl>
</div>



</body>

</html>

这仍然会产生相同的视觉效果：

enter image description here

然而，令人烦恼的是，为了实现这一点，创建了两个单独的定义列表。实际上，假设只是一个列表：

  <dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
    <dt>Key3</dt>
    <dd>Value3</dd>
    <dt>Key4</dt>
    <dd>Value4</dd>
    <dt>Key5</dt>
    <dd>Value5</dd>
    <dt>Key6</dt>
    <dd>Value6</dd>
  </dl>

包含拆分的唯一原因是出于演示目的。你怎么能绕过这个呢？

Answer 1

听起来像是应该使用<dl>标记的主要示例。它就像<ul>但允许键值对。

https://developer.mozilla.org/en/HTML/Element/dl

例如：

<dl>
    <dt>Key 1</dt>
    <dd>Value 1</dd>
    <dt>Key 2</dt>
    <dd>Value 2</dd>
    <dt>Key 3</dt>
    <dd>Value 3</dd>
</dl>

<dl>
    <dt>Key 4</dt>
    <dd>Value 4</dd>
    <dt>Key 5</dt>
    <dd>Value 5</dd>
    <dt>Key 6</dt>
    <dd>Value 6</dd>
</dl>

Answer 2

如果你可以使CSS工作，那么根据HTML5规范，<dl>将成为键值关联的方法：

http://dev.w3.org/html5/spec-author-view/the-dl-element.html#the-dl-element

但是，可以使用the headers attribute 表示与表格的键值关联：

<table>
    <tr>
        <th id="kv1_k">Key 1</th>
        <td headers="kv1_k">Val 1</td>

        <th id="kv4_k">Key 4</th>
        <td headers="kv4_k">Val 4</td>
    </tr>
    <tr>
        <th id="kv2_k">Key 2</th>
        <td headers="kv2_k">Val 2</td>

        <th id="kv5_k">Key 5</th>
        <td headers="kv5_k">Val 5</td>
    </tr>
    <tr>
        <th id="kv3_k">Key 3</th>
        <td headers="kv3_k">Val 3</td>

        <th id="kv6_k">Key 6</th>
        <td headers="kv6_k">Val 6</td>
    </tr>
</table>

因此，鉴于数据的语义尽可能表达，我认为在这里使用表没有任何问题。

Answer 3

我希望我们这样做：

<div class="table">
  <dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
    <dt>Key3</dt>
    <dd>Value3</dd>
  </dl>
  <dl>
    <dt>Key4</dt>
    <dd>Value4</dd>
    <dt>Key5</dt>
    <dd>Value5</dd>
    <dt>Key6</dt>
    <dd>Value6</dd>
  </dl>
</div>

然后你可以相应地漂浮和清理东西。

Answer 4

<table />具有语义含义，但您的表内容却没有。它在非视觉层面上没有意义。没有标题，没有标题范围。

显然有一些人接受使用<table /> s进行布局（试图根据是否包含摘要来确定它是否是表现形式），但这最多是粗略的。

你真的应该决定如何为你的用户编写html。您可能会乐意使用<tables />，因为有人可能会乐意仅使用<div />来标记所有内容。在视觉层面上，可以工作。仅仅因为更容易使用表格进行布局并不意味着它更好或更明智。

标记较少也可能加重标记。

我注意到您对页面缩放产生了担忧。我同意这可能是一个痛苦的处理，但我倾向于期望缩放页面的用户主要是那些有某种形式的视力困难的用户。我认为关注这些人会对那些不得不使用屏幕阅读器来获取内容的用户造成损害。有一些不需要表的页面缩放问题。

正如少数人所说，这是一个使用<dl />的好地方，因为它具有语义意义。不幸的是，您展示的<ul />方法并不像分割价值对那样。

希望这是有道理的 - 如果您愿意，很乐意谈论具体要点。对我自己而言，有意义的标记始终是目标。

Answer 5

语义 - 屏幕阅读器将列表读取为列表，无论布局如何复杂。

Answer 6

在我看来，表确实有其优点，不应该在Web开发中完全忽略。

但是，在大多数情况下，使用非表格CSS布局的灵活性有利于网页的整体设计。

无表格设计以表格式样式呈现非表格数据值得吗？

6 个答案: