简单(我希望),HTML 问题。
假设我有一个跨越 3 列的列组。但它也跨越 9 行。但实际上,我希望有 3 级列(基本上,3 列,分成 9 行)。真正的唯一目标是:
a)避免嵌入表格(出于各种原因) b)保持部分模块化。c) 允许语义模块化区域的样式。
所以最后,我会有一些视觉上的东西:
| col 1 | col 2 | col 3 |
| row 1 | row 1 | row 1 |
| row 2 | row 2 | row 2 |
| row 3 | row 3 | row 3 |
| col 4 | col 5 | col 6 |
| row 4 | row 4 | row 4 |
| row 5 | row 5 | row 5 |
| row 6 | row 6 | row 6 |
| col 7 | col 2 | col 3 |
| row 7 | row 7 | row 7 |
| row 8 | row 8 | row 8 |
| row 9 | row 9 | row 9 |
我能够让列组工作以将 3 列保持在一起,但尝试添加“rowspan”失败了。尝试将行组包装在 tr 标记中根本没有好处。据我所知,没有真正的“行组”标签。
更新:
得到反馈后,我意识到我应该详细说明我的想法。
我将使用术语quad、super-column、super-row 来指代数据组。所以举个例子:
Quad 1 Quad 2
super-row1 | a | b | c || d | e | f |
super-row2 | 1 | 2 | 3 || 4 | 5 | 6 |
super-row3 | A | B | C || D | E | F |
Quad 3 Quad 4
super-row4 | g | h | i || j | k | l |
super-row5 | 7 | 8 | 9 || 0 | 1 | 2 |
super-row6 | G | H | I || J | K | L |
为简单起见,想象一下我在顶部写了 super-col 1 - 6。
因此,quad 1 中的数据全部相关,super-row 1 中的数据全部相关,super-col 1 中的数据全部相关。所以,利用上面的数据,
“a”与“f”、“C”和“G”有直接关系,但“f”、“C”和“G”彼此之间没有直接关系。
另一种思考方式是数独,其中每个四边形、列和行包含 1-9 的集合,使 81 个数据点中的任何一个与它共享行、列或四边形的任何其他数据点直接相关,但不是任何数据点。
快速更新:
最后一件事,对不起。重要的是,这些关系在 HTML 中按语义分组,这样,如果有人使用屏幕阅读器或非传统浏览器,他们可以在任何给定点知道他们在表格中的位置,即“你在 Quad 1,Super第 1 列,第 4 列,第 1 行,第 1 行。数据为“俄亥俄州”。”
这使得样式、跨浏览器兼容性、可访问性都变得更加容易,以及诸如 AccessKeys、Scope 等的移动。