在 colgroup 上设置行跨度？

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 标记中一点都不好。据我所知，没有真正的“行组”标签。

更新：

在得到反馈后，我意识到我应该详细说明我的想法。

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

为简单起见，想象一下我在顶部写了 super-col 1 - 6。

所以，quad 1 中的数据都是相关的，super-row 1 中的数据都是相关的，super-col 1 中的数据也是相关的。所以，利用上面的数据，

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

另一种思考方式是数独，其中每个四边形、列和行包含 1-9 的集合，使 81 个数据点中的任何一个直接与它共享一行、列或四边形，但不是任何数据点。

快速更新：

最后一件事，对不起。重要的是，这些关系在 HTML 中进行语义分组，这样，如果有人使用屏幕阅读器或非传统浏览器，他们可以知道他们在任何给定点在表格中的位置，即“你在 Quad 1，Super第 1 列，第 4 列，超级第 1 行，第 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>

Answer 2

一个<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 spec 的信息，但它也应该是有效的 HTML 4。

Answer 3

如果我没记错的话，<colgroup> 标签在任何浏览器中都不能正常工作（好吧，也许是 Opera）。我会不惜一切代价避免它。

如果我是你，我会制作一个简单的表格，其中每个 <td> 代表一个“四边形”，然后在该单元格中为其余数据制作一个表格。

Answer 4

实际上，语义上正确的方法是嵌套表。您的示例有一个 2x2 的四边形表，每个四边形是一个 3x3 的值表。为此使用嵌套表在语义上没有任何问题。不要对 anti-nested-html-table 人群感到困惑。这与使用嵌套表格进行页面布局有关。

使用嵌套表格还可以让您更好地控制 CSS 样式。使用 cols 和 colgroups 只会给您非常有限的样式控制。您可以在 col 或 colgroup 上设置的唯一 CSS 属性是边框、背景、具有和可见性。

Answer 5

我认为最简单的方法是一起跳过 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 使用多个表格主体的方式。如果这确实有效，那么我会采用该解决方案，只需在每个表体标签上放置一个类名。 CSS 将保持不变