user3162553 user3162553 - 4 months ago 7
HTML Question

Designing Uneven Tables In HTML

I would like to create a table that has 3 columns. In the first column will be 1 row

country group description

name sub1 details
sub2 details
sub3 details


Now, I've come up with one solution that is almost there:



<table>
<thead>
<tr>
<th>Country</th>
<th>Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>sub1</td>
<td>details</td>
</tr>
<tr>
<td></td>
<td>sub2</td>
<td>details</td>
</tr>
<tr>
<td></td>
<td>sub3</td>
<td>details</td>
</tr>
</tbody>
</table>





The problem with this approach is that now the row doesn't encapsulate the data anymore. It's split and I cannot easily search or group by knowing the row anymore.

I've tried to achieve a similar thing but I've yet to achieve it. If I use rowspan on the first column, i need to create other
<tr>
to be able to see the effect.

Answer

Try using "rowspan" in the <td> for "name", and remove the other <td>'s in successive rows:

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Group</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">name</td>
      <td>sub1</td>
      <td>details</td>
    </tr>
    <tr>
      <td>sub2</td>
      <td>details</td>
    </tr>
    <tr>
      <td>sub3</td>
      <td>details</td>
    </tr>
  </tbody>
</table>