Html 在colgroup上设置行跨度？

简单（我希望如此），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标记中一点用都没有。据我所知，没有真正的“rowgroup”标签

更新：

在得到反馈后，我意识到我应该给出更多关于我的想法的细节

我将使用术语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 |

为了简单起见，想象一下，在顶部我写了SuperCol1-6

所以，四元组1中的数据都是相关的，超级行1中的数据都是相关的，超级列1中的数据都是相关的。那么利用上面的数据,

“a”与“f”、“C”和“G”有直接关系，但“f”、“C”和“G”之间没有直接关系

另一种思考方法是数独，其中每个四元、列和行包含1-9的集合，使81个数据点中的任何一个直接与它共享一行、列或四元的任何其他数据点相关，但与任何数据点无关

快速更新：

最后一件事，对不起。这些关系在HTML中按语义分组是很重要的，这样，如果有人使用屏幕阅读器或非传统浏览器，他们就可以知道在任何给定的点上它们在表中的位置，即“您在四元组1，超级列1，第4列，超级行1，第1行。数据是‘Ohio’。”

这使得样式设置、跨浏览器兼容性、可访问性以及诸如AccessKeys、Scope等的移动变得更加容易。

一个

可以有多个子

表示行组。我以前没有使用过

元素，因此我将把它留给其他人添加，但这里有一个解决方案，它将允许您在保持语义的同时实现您的样式需求：

<table>
    <tbody>
        <tr>
            <th scope="col">col 1</th>
            <th scope="col">col 2</th>
            <th scope="col">col 3</th>
        </tr>
        <tr>
            <td>row 1</td>
            <td>row 1</td>
            <td>row 1</td>
        </tr>
        <tr>
            <td>row 2</td>
            <td>row 2</td>
            <td>row 2</td>
        </tr>
        <tr>
            <td>row 3</td>
            <td>row 3</td>
            <td>row 3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 4</th>
            <th scope="col">col 5</th>
            <th scope="col">col 6</th>
        </tr>
        <tr>
            <td>row 4</td>
            <td>row 4</td>
            <td>row 4</td>
        </tr>
        <tr>
            <td>row 5</td>
            <td>row 5</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row 6</td>
            <td>row 6</td>
            <td>row 6</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 7</th>
            <th scope="col">col 8</th>
            <th scope="col">col 9</th>
        </tr>
        <tr>
            <td>row 7</td>
            <td>row 7</td>
            <td>row 7</td>
        </tr>
        <tr>
            <td>row 8</td>
            <td>row 8</td>
            <td>row 8</td>
        </tr>
        <tr>
            <td>row 9</td>
            <td>row 9</td>
            <td>row 9</td>
        </tr>
    </tbody>
</table>

第1列
第2列
第3列
第1行
第1行
第1行
第2排
第2排
第2排
第3排
第3排
第3排
第4列
第5列
第6栏
第4排
第4排
第4排
第5行
第5行
第5行
第6行
第6行
第6行
第7栏
第8栏
第9栏
第7排
第7排
第7排
第8行
第8行
第8行
第9行
第9行
第9行

我基于中的信息，但它也应该是有效的HTML4。

A

可以有多个子

表示行组。我以前没有使用过

元素，因此我将把它留给其他人添加，但这里有一个解决方案，它将允许您在保持语义的同时实现您的样式需求：

<table>
    <tbody>
        <tr>
            <th scope="col">col 1</th>
            <th scope="col">col 2</th>
            <th scope="col">col 3</th>
        </tr>
        <tr>
            <td>row 1</td>
            <td>row 1</td>
            <td>row 1</td>
        </tr>
        <tr>
            <td>row 2</td>
            <td>row 2</td>
            <td>row 2</td>
        </tr>
        <tr>
            <td>row 3</td>
            <td>row 3</td>
            <td>row 3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 4</th>
            <th scope="col">col 5</th>
            <th scope="col">col 6</th>
        </tr>
        <tr>
            <td>row 4</td>
            <td>row 4</td>
            <td>row 4</td>
        </tr>
        <tr>
            <td>row 5</td>
            <td>row 5</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row 6</td>
            <td>row 6</td>
            <td>row 6</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="col">col 7</th>
            <th scope="col">col 8</th>
            <th scope="col">col 9</th>
        </tr>
        <tr>
            <td>row 7</td>
            <td>row 7</td>
            <td>row 7</td>
        </tr>
        <tr>
            <td>row 8</td>
            <td>row 8</td>
            <td>row 8</td>
        </tr>
        <tr>
            <td>row 9</td>
            <td>row 9</td>
            <td>row 9</td>
        </tr>
    </tbody>
</table>

第1列
第2列
第3列
第1行
第1行
第1行
第2排
第2排
第2排
第3排
第3排
第3排
第4列
第5列
第6栏
第4排
第4排
第4排
第5行
第5行
第5行
第6行
第6行
第6行
第7栏
第8栏
第9栏
第7排
第7排
第7排
第8行
第8行
第8行
第9行
第9行
第9行

---

我基于来自的信息，但它也应该是有效的HTML 4。

我认为最简单的方法是跳过colgroup元素，改为使用简单的类样式：

<table>
    <tr class="colgroup1">
        <th>col1</th><th>col2</th><th>col3</th>
    </tr>
    <tr class="colgroup1">
        <td>row1</td><td>row1</td><td>row1</td>
    </tr>
    <tr class="colgroup1">
        <td>row2</td><td>row2</td><tr>row2</td>
    </tr>
    <tr class="colgroup2">
        <th>col4</th><th>col5</th><th>col6</th>
    </tr>
    <tr class="colgroup2">
        <td>row3</td><td>row3</td><td>row3</td>
    </tr>
    <tr class="colgroup2">
        <td>row4</td><td>row4</td><td>row4</td>
    </tr>
    <tr class="colgroup3">
        <th>col7</th><th>col8</th><th>col9</th>
    </tr>
    <tr class="colgroup3">
        <td>row5</td><td>row5</td><td>row5</td>
    </tr>
    <tr class="colgroup3">
        <td>row6</td><td>row6</td><td>row6</td>
    </tr>
</table>

---

编辑：我喜欢使用多个表体的方式。如果这确实有效，那么我将使用该解决方案，并在每个表体标记上放置一个类名。CSS将保持不变

我认为最简单的方法是跳过colgroup元素，改为使用简单的类样式：

<table>
    <tr class="colgroup1">
        <th>col1</th><th>col2</th><th>col3</th>
    </tr>
    <tr class="colgroup1">
        <td>row1</td><td>row1</td><td>row1</td>
    </tr>
    <tr class="colgroup1">
        <td>row2</td><td>row2</td><tr>row2</td>
    </tr>
    <tr class="colgroup2">
        <th>col4</th><th>col5</th><th>col6</th>
    </tr>
    <tr class="colgroup2">
        <td>row3</td><td>row3</td><td>row3</td>
    </tr>
    <tr class="colgroup2">
        <td>row4</td><td>row4</td><td>row4</td>
    </tr>
    <tr class="colgroup3">
        <th>col7</th><th>col8</th><th>col9</th>
    </tr>
    <tr class="colgroup3">
        <td>row5</td><td>row5</td><td>row5</td>
    </tr>
    <tr class="colgroup3">
        <td>row6</td><td>row6</td><td>row6</td>
    </tr>
</table>

编辑：我喜欢使用多个表体的方式。如果这确实有效，那么我将使用该解决方案，并在每个表体标记上放置一个类名。CSS将保持不变，因为

是对列进行分组的唯一语义方法，

是对行进行分组的唯一语义方法，我建议坚持使用一些简单的方法：

<table>
    <colgroup id="colgroup1">
        <col id="colA" />
        <col id="colB" />
    </colgroup>
    <colgroup id="colgroup2">
        <col id="colC" />
        <col id="colD" />
    </colgroup>
    <tbody id="rowgroup1">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row1">
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr id="row2">
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
        </tr>
    </tbody>
    <tbody id="rowgroup2">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row3">
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
            <td>D3</td>
        </tr>
        <tr id="row4">
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
            <td>D4</td>
        </tr>
    </tbody>
</table>

A.
B
C
D
A1
地下一层
C1
D1
A2
地下二层
C2
D2
A.
B
C
D
A3
地下三层
C3
D3
A4
B4
补体第四成份
D4

鉴于

是对列进行分组的唯一语义方法，

是对行进行分组的唯一语义方法，我建议坚持使用一些简单的方法：

<table>
    <colgroup id="colgroup1">
        <col id="colA" />
        <col id="colB" />
    </colgroup>
    <colgroup id="colgroup2">
        <col id="colC" />
        <col id="colD" />
    </colgroup>
    <tbody id="rowgroup1">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row1">
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr id="row2">
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
        </tr>
    </tbody>
    <tbody id="rowgroup2">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr id="row3">
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
            <td>D3</td>
        </tr>
        <tr id="row4">
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
            <td>D4</td>
        </tr>
    </tbody>
</table>