如何创建一个包含这样的分组行的表？

Question

我想创建一个包含类似于

的行组的表

但我无法弄明白。我尝试使用多个<tbody>元素，调整colspan元素上的<td>，但这两个元素都不适用于我。如果它使任务更容易，我使用的是jQuery DataTables。

编辑：这就是我的内容

<table id="groupedTable">
        <thead>
            <tr>
                <th>Group</th>                                
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
        </tbody>

    </table>

是的，我知道缩进是古怪的，编辑在这里讨厌我

Answer 1

我相信你正在寻找rowspan。这个小提琴对你有什么作用？

jsFiddle

<table>
  <tr>
    <th>Group</th>
    <th>Name</th>
  </tr>
  <tr>
    <td rowspan="4">Group 1</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td rowspan="4">Group 2</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
</table>