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>