KPC
Kevin Powell - Community•10mo ago
Abulkalam

Merged cells in table

I am creating this table layout with merged cells. The html I have written is a bit awkward. Please let me know if this is good or is there a better solution. 
<table border="1">
  <thead>
    <tr>
      <th>category</th>
      <th>quantity</th>
      <th>spaces</th>
      <th>sizes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">bedroom</td>
      <td rowspan="3">2</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="4">washroom</td>
      <td rowspan="4">3</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>third</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="2">something</td>
      <td rowspan="2">1</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <thead>
    <tr>
      <th>category</th>
      <th>quantity</th>
      <th>spaces</th>
      <th>sizes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">bedroom</td>
      <td rowspan="3">2</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="4">washroom</td>
      <td rowspan="4">3</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>third</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="2">something</td>
      <td rowspan="2">1</td>
    </tr>
    <tr>
      <td>first</td>
      <td>5 FT</td>
    </tr>
  </tbody>
</table>
No description
4 Replies
Jochem
Jochem•10mo ago
other than your rowspans being one too high, I don't think there's a better option
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•10mo ago
<table border="1">
  <thead>
    <tr>
      <th>Category</th>
      <th>Quantity</th>
      <th>Spaces</th>
      <th>Sizes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Bedroom</td>
      <td rowspan="2">2</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="3">washroom</td>
      <td rowspan="3">3</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>third</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>something</td>
      <td>1</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <thead>
    <tr>
      <th>Category</th>
      <th>Quantity</th>
      <th>Spaces</th>
      <th>Sizes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Bedroom</td>
      <td rowspan="2">2</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td rowspan="3">washroom</td>
      <td rowspan="3">3</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
    <tr>
      <td>second</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>third</td>
      <td>3 FT</td>
    </tr>
    <tr>
      <td>something</td>
      <td>1</td>
      <td>first</td>
      <td>5 FT</td>
    </tr>
  </tbody>
</table>
Jochem
Jochem•10mo ago
oh yes, that's a good point, I missed that
Abulkalam
AbulkalamOP•10mo ago
alright! Thanks

Did you find this page helpful?