当数据行包含不能适合单个表行的复杂数据时,我想知道在网页上标记表格数据的最佳方式.
这是一个具体的例子.第一行有一个关于胳膊和腿的附加信息的列表.
Shadrach M Banana 12 Arms Blue 2 Legs Yellow 3 Meshgah M Apple 34 Abednego M Persimmon 0
有没有一个很好的方式来标记这个,除了使用一个包含这样的嵌套表的跨越单元格?
+-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | +-------+------+-+ | | | | | | | | +-------+------+-+ | | | | | | | | +-------+------+-+ | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+ | | | | | +-------+--+--------+-----+
我不完全满意,因为外表有四列,具体的标题和含义;但第二行跨所有四列,并包含不同的东西.我真的希望这些信息成为第一行项目(Shadrach)的一部分,而不是顶级表的一部分.但HTML似乎不允许我这样做.
有更好的,更语义的方式吗?
解决方法
在尝试使您的标记更加语义时,您需要问自己的一件事就是要做什么.语义标记具有价值,因为它更容易样式,并应用不同的样式表,而不必为您使用的标记自定义它们.它具有价值,因为它有助于可访问性,使屏幕阅读器或替代渲染引擎更容易适当地分析它.有时它有价值,因为搜索引擎或其他自动化工具可以从中提取信息.
然而,有时候,您会遇到HTML无法处理的情况.这似乎是其中之一. HTML没有任何方法在表中嵌套分层数据,其中列与表的其他列不匹配.所以,你需要做的最好与你所拥有的.在这一点上,担心让它变得更加语义不会让你买得太多;你正在做一些相当特殊的事情,其他样式表,屏幕阅读器和工具可能不知道该怎么做,所以几乎所有解决方案都不完全违背元素的目的有问题是可以的.
我认为你提到的解决方案是你能做的最好的.将包含嵌套表的行标记为一个类,表示它们不像其他行,并称之为好.如果需要,您可以使用多个< tbody>将它们与它们所附加的行分组在一起.内容:
<table> <tbody> <tr><td>Shadrach <td>M <td>Banana <td>12 <tr class=nested><td colspan=4> <table>...</table> <tbody> <tr><td>Meshgah <td>M <td>Apple <td>34 <tbody> <tr><td>Abednego <td>M <td>Persimmon <td>0 </table>