在colgroup上设置rowspan？
https://stackoverflow.com/questions/1006089
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
简单（我希望），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列保持在一起，但尝试添加<！> quot; rowspan <！> quot;失败。想要将行组包装在tr标签中并不是很好。据我所知，没有真正的<！> quot; rowgroup <！> quot;标签
更新
在收到反馈后，我意识到我应该详细说明我的想法。
我将使用术语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 |
为了简单起见，想象一下，我写了超级col 1 - 6。
因此，quad 1中的数据都是相关的，超行1中的数据都是相关的，super-col 1中的数据都是相关的。所以，使用上面的数据，
'a'与'f'，'C'和'G'有直接关系，但'f'，'C'和'G'彼此没有直接关系。
另一种思考方式是Sudoku，其中每个四元组，一列和一行包含1-9的集合，使81个数据点中的任何一个直接与其共享行，列或任何其他数据点相关联。四边形，但不包括任何数据点。
快速更新：
最后一件事，抱歉。重要的是，这些关系在语义上按HTML分组，这样，如果某人使用屏幕阅读器或非传统浏览器，他们可以知道在任何给定点它们在表中的位置，即<！> quot;你在Quad 1，Super Col 1，Column 4，Super Row 1，Row 1.数据为'Ohio'。<！>
这使得样式，跨浏览器兼容性，可访问性变得更加容易，以及诸如AccessKeys，Scope等的移动。
解决方案
鉴于<colgroup>是唯一的分组列的语义方法，而<tbody>是分组行的唯一语义方法，我建议坚持使用简单的方法：
<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>
这将允许您在保持干净的语义结构的同时设置四边形的样式。我不确定你在造型方面有多大的灵活性，但你确实有一些选择：
<style type="text/css">
table { border-collapse:collapse; font-family:sans-serif; font-size:small; }
td, th { border:solid 1px #000; padding:2px 10px; text-align:center; }
th { background-color:#000; color:#fff; font-size:x-small; }
colgroup { border:solid 3px #000; }
tbody { border:solid 3px #000; }
</style>
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: small;
}
td,
th {
border: solid 1px #000;
padding: 2px 10px;
text-align: center;
}
th {
background-color: #000;
color: #fff;
font-size: x-small;
}
colgroup {
border: solid 3px #000;
}
tbody {
border: solid 3px #000;
}<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>
其他提示
<table>可以有多个<tbody>子项，表示行组。我之前没有使用<colgroup>元素，所以我会留给其他人添加，但这里有一个解决方案，可以让你在保持语义的同时实现你的样式需求：
<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>
我根据 HTML 5规范，但它也应该是有效的HTML 4。
如果我没记错的话，<colgroup>标签在任何浏览器中都无法正常工作（好吧，Opera也许）。我会不惜一切代价避免它。
如果我是你，我只是制作一个简单的表格，其中每个<td>代表一个<！>“quad <！>”;然后在该单元格中为其余数据创建一个表。 / p>
实际上，语义上正确的方式是嵌套表。您的示例有一个2x2的四边形表，每个四边形是一个3x3的值表。使用嵌套表没有任何语义错误。不要对反嵌套的html表人群感到困惑。这与使用嵌套表进行页面布局有关。
使用嵌套表格还可以更好地控制CSS样式。使用cols和colgroup只能给你非常有限的样式控制。您可以在col或colgroup上设置的唯一CSS属性是border，background，with和visibility。
我认为最简单的方法是一起跳过colgroup-element并改为使用简单的类样式：
<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：
.colgroup1 th {
// Styles here
}
.colgroup2 th {
// Styles here
}
.colgroup3 th {
// Styles here
}
// Same for tds.
修改：我喜欢 Rory Fitzpatrick 使用多个表体。如果这确实有效，那么我将使用该解决方案，并在每个table body标签上添加一个类名。 CSS将保持不变
