iMassakre iMassakre - 3 months ago 7
HTML Question

How can I make a table with grouped rows like this?

I want to make a table that has groups of rows that looks similar to this

enter image description here

But I can't quite figure it out. I've tried using multiple

<tbody>
elements, adjusting the
colspan
on my
<td>
elements, but neither of those are working for me. If it makes the task any easier, I am using jQuery DataTables.

edit: Here's what I have

<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>


yes, I know the indentation is wacky, by the editor on here hates me

Answer

I believe you're looking for rowspan. How does this fiddle work for you?

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>