Html 无表设计以类似表格的方式呈现非表格数据值得吗？_Html_Css

Html 无表设计以类似表格的方式呈现非表格数据值得吗？

html css

Html 无表设计以类似表格的方式呈现非表格数据值得吗？,html,css,Html,Css,假设我有一个包含6个键和6个值的键、值列表。我希望以类似表格的方式（表示）在HTML中呈现这些键、值对，尽管它们不一定是表格数据。因此不建议使用HTML标记，原因有二：应将表示与数据分开标记不应用于表示目的，仅用于表格数据无论如何，基本思想是非常简单地呈现这些价值观，例如：使用HTML/CSS和标记很容易实现这一点。提供了示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

假设我有一个包含6个键和6个值的键、值列表。我希望以类似表格的方式（表示）在HTML中呈现这些键、值对，尽管它们不一定是表格数据。因此不建议使用HTML

标记，原因有二：

应将表示与数据分开

标记不应用于表示目的，仅用于表格数据

无论如何，基本思想是非常简单地呈现这些价值观，例如：

使用HTML/CSS和

标记很容易实现这一点。提供了示例代码：

<!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>

它可以按规定工作，在当前的浏览器中，缩放也可以工作。（除非在IE6中，文本缩放会推动所有内容，否则会造成混乱）

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

需要更多的CSS，尤其是clearfix

理想情况下，对于可访问性，您希望每个键按顺序显示，然后是每个值，在这里您可以得到3个键、3个值、3个键、3个值。这使得在没有CSS的情况下呈现这个选项看起来很奇怪，而在没有CSS的情况下呈现表选项仍然有意义

因此，基本上，问题归结为：既然表格在以表格形式呈现信息方面表现得如此出色，为什么在以类似表格的方式呈现非表格数据时，要尝试使用

和复杂的浮点和其他CSS技巧来模仿相同的风格？从所有HTML中去除

的主要好处是什么

编辑我知道这有点偏离了原来的问题，一些答案建议使用

，使其在语义上更加准确。我同意。因此，该方法的示例代码如下所示：

<!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>


测试1
.桌子{
宽度：300px；
边框：实心1px黑色；
}
.表dl{
浮动：左；
左侧填充：0px；
宽度：150px；
}
.表dl dt、.表dl dd{
宽度：75px；
文本对齐：居中；
浮动：左；
边际：0px；
}
/*下面是明确的修正*/
/*适用于现代浏览器*/
.cf：之前，
.cf：之后{
内容：“；
显示：表格；
}
.cf：之后{
明确：两者皆有；
}
/*对于IE 6/7（触发器布局）*/
.cf{
缩放：1；
}
关键1
价值1
键2
价值2
键3
价值3
关键4
价值4
键5
价值5
键6
价值6

这仍然可以获得相同的视觉效果：

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

  <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>


关键1
价值1
键2
价值2
键3
价值3
关键4
价值4
键5
价值5
键6
价值6

包含拆分的唯一原因是出于表示目的。您将如何处理这个问题？

听起来像是一个使用

标记的主要示例。它类似于

，但允许键、值对

例如：

<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>


关键1
值1
关键2
价值2
关键3
价值3
关键4
价值4
关键5
价值5
关键6
价值6

语义-屏幕阅读器以列表的形式阅读列表，无论其布局多么复杂。

在我看来，表格确实有其优势，在web开发中不应完全忽视

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

我将为此向我们提供dl：

<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>


关键1
价值1
键2
价值2
键3
价值3
关键4
价值4
键5
价值5
键6
价值6

然后您可以相应地浮动和清除内容。

具有语义含义，但您的表内容没有语义含义。这在非视觉层面上毫无意义。没有标题，没有标题范围

显然，对于使用

s进行布局（试图根据是否包含摘要来确定其是否具有代表性）有一些认可，但这充其量只是粗略的

实际上，您应该决定如何为用户编写html。您可能很乐意为此使用

，就像有些人可能很乐意只使用

s进行标记一样。在视觉层面上，它可以工作。仅仅因为使用表格进行布局更容易，并不意味着它更好或更合理

加价越少，加价越差

我注意到您提出了一个关于页面缩放的问题。我同意这是一个很难处理的问题，但我倾向于认为缩放页面的用户主要是那些有某种视觉障碍的用户。我认为把注意力集中在这些人身上，而损害那些不得不使用屏幕阅读器来获取内容的用户是失职的。有一些方法可以解决不需要表格的页面缩放问题

正如一些人所说，这是一个使用

的好地方，因为它在语义上是有意义的。不幸的是，您展示的

方法并不是在拆分值对时使用的

希望这是有意义的——如果你愿意，很高兴谈论具体的问题。对我来说，有意义的标记始终是目标。

如果你能让CSS工作，那么根据HTML5规范，

将是键值关联的方式：

但是，可以使用以下方法表示与表的键值关联：


关键1
瓦尔1
关键4
Val 4
关键2
Val 2
关键5
瓦尔5
关键3
Val 3
关键6
Val 6

因此，假设数据的语义也表示为

<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>

<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>