在colgroup上设置rowspan？

Question

简单(我希望),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 |

为了简单起见,想象一下,在顶部我写了超级1 - 6.

因此,quad 1中的数据都是相关的,并且超行1中的数据都是相关的,并且super-col 1中的数据都是相关的.那么,使用上面的数据,

'a'与'f','C'和'G'有直接关系,但'f','C'和'G'彼此没有直接关系.

另一种思考方式是Sudoku,其中每个四元组,一列和一行包含1-9的集合,使81个数据点中的任何一个直接与其共享行,列或四元组的任何其他数据点相关,但不是任何数据点.

快速更新:

最后一件事,抱歉.重要的是,这些关系在语义上按HTML分组,这样,如果某人使用屏幕阅读器或非传统浏览器,他们可以知道他们在任何给定点的表格中的位置,即"你在Quad 1,Super Col 1,Column 4,Super Row 1,Row 1.数据为'Ohio'."

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

Answer 1

鉴于这<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>