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>
4 Replies
other than your rowspans being one too high, I don't think there's a better option
<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>
oh yes, that's a good point, I missed that
alright! Thanks