复杂或嵌套HTML表格的语义标记?

前端之家收集整理的这篇文章主要介绍了复杂或嵌套HTML表格的语义标记?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当数据行包含不能适合单个表行的复杂数据时,我想知道在网页上标记表格数据的最佳方式.

这是一个具体的例子.第一行有一个关于胳膊和腿的附加信息的列表.

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>

猜你在找的HTML相关文章