在colgroup上设置rowspan？ [英] Setting rowspan on colgroup?
问题描述
简单（我希望），HTML问题。
假设我有一个跨越3列的列组。但它也跨越9行。但实际上，我想要有3级的列（所以基本上，3列，拆分为9行）。唯一的目标是：
a）避免嵌入表（出于各种原因）
b）保持段模块化。
c）允许语义模块化区域的样式。
所以最后，我会有一些外观上像：
| col 1 | col 2 | col 3 |
|行1 |行1 |行1 |
|行2 |行2 |行2 |
|行3 |行3 |行3 |
| col 4 | col 5 | col 6 |
|行4 |行4 |行4 |
|行5 |行5 |行5 |
|行6 |行6 |行6 |
| col 7 | col 2 | col 3 |
|行7 |行7 |行7 |
|行8 |行8 |行8 |
|行9 |行9 |行9 |
我能够使列组工作，将3列保持在一起，添加rowspan失败。尝试包装行组在tr标签是没有好处。
更新：
之后获得反馈，我意识到我应该提供更多关于我的想法的细节。
我将使用术语quad，超列，超行来引用数据组。例如：
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 - p>
因此，quad 1中的数据全部相关，超行1中的数据全部相关，super-col 1中的数据全部相关。因此，使用上述数据，
'a'与'f'，'C'和'G'有直接关系，但'f' '和'G'彼此没有直接关系。
另一种思考方式是数独，其中每个四边形，列和行包含一组1-9，使任何81个数据点与任何其他数据点直接相关，它与，但不与任何数据点共享行，列或四元。
快速更新：
最后一件事，对不起。重要的是这些关系在语言上被分组在HTML中，因此，如果有人使用屏幕阅读器或非传统的浏览器，他们可以知道在任何给定点，他们在表中的位置，即You are in Quad 1，Super数据为Ohio。
这使得样式，跨浏览器兼容性，可访问性变得更加容易，
由于< 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 {boundary-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>
Simple (I hope), HTML question.
Let's say I have a column group that spans 3 columns. But it also spans 9 rows. But in actuality, I want there to be 3 levels of columns (so basically, 3 columns, split across 9 rows). The only objectives really are:
a) avoid embedding tables (for various reasons) b) keep the sections modular. c) allow for styling of the semantically modular areas.
So in the end, I would have something visually like:
| 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 |
I was able to get the column groups to work to keep the 3 columns together, but an attempt to add "rowspan" failed.Trying to wrap the row groups in tr tags was no good at all. and as far as i an tell, there is no real "rowgroup" tag.
Update:
After getting feedback, I realized I should give more details on what I have in mind.
I'll use the term quad, super-column, super-row to refer to groups of data. So take this example:
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 |
For simplicity sake, just imagine that across the top I wrote super-col 1 - 6.
So, the data in quad 1 is all related, and the data in super-row 1 is all related, and the data in super-col 1 is all related. So, using the above data,
'a' has a direct relationship with 'f', 'C', and 'G', but 'f', 'C', and 'G' have no direct relationship with each other.
Another way of thinking about it is Sudoku, where each quad, column, and row contain the set of 1-9, making any of the 81 data points related directly to any other data points it shares a row, column, or quad with, but not to any data points.
Quick update:
One last thing, sorry. It's important that these relationships be grouped semantically in the HTML so that, should someone be using a screen reader or non-traditional browser, they can know where they are in the table at any given point, ie "You are in Quad 1, Super Col 1, Column 4, Super Row 1, Row 1. The data is 'Ohio'."
This makes styling, cross-browser compatibility, accessibility all much easier, as well as an moving around such as AccessKeys, Scope, etc.
Given that <colgroup> is the only semantic method of grouping columns and <tbody> is the only semantic means of grouping rows, I'd recommend sticking with something simple:
<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>
This will allow you to style quads while still maintaining a clean, semantic structure. I'm not sure how much flexibility you'll have in styling, but you do have some options:
<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>
这篇关于在colgroup上设置rowspan？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
