>应该将演示文稿与数据分开.
>< table>标签不应仅用于表示目的,仅用于表格数据.
无论如何,基本思想是非常简单地呈现这些值,如下所示：
使用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(许多浏览器中的常见功能)设置得更高时,所有行都保持不变,因为用户会直观地期望：
这种结构的常见的无表格设计是通过CSS浮动样式和< 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 > <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技巧模仿相同的风格？从努力摆脱< table>这里到底有什么好处？来自所有HTML？
编辑
我知道这有点偏离原始问题,几个答案建议使用< 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 > <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> 这仍然具有相同的视觉效果：
然而,令人烦恼的是,为了实现这一点,创建了两个单独的定义列表.实际上,假设只是一个列表：
<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>
包括拆分的唯一原因是出于表现目的.你怎么能绕过这个？
解决方法 听起来像是你应该使用< 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>总结
以上是内存溢出为你收集整理的HTML – 无桌面设计以表格式样式呈现非表达式数据值得吗？全部内容，希望文章能够帮你解决HTML – 无桌面设计以表格式样式呈现非表达式数据值得吗？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）