Menu
I am trying to create a table with sub-headings and side-headings which looks like the picture below:
This is what I have so far:
<table>
<thead>
<tr>
<th>Object</th>
<th>Openings</th>
<th>Internal Dimensions</th>
<th>Weight</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>Box</td>
<td>300x500</td>
<td>300cm x 400cm x 600cm</td>
<td>Min: 100g, Max: 200g, NA</td>
<td>300</td>
</tr>
</tbody>
</table>
Is it possible to have a table that looks similarly to the picture above.
781
already answered but markup should be more like this :
<table>
<thead>
<tr>
<th colspan="2">Object</th>
<th colspan="2">Openings</th>
<th colspan="3">Internal Dimensions</th>
<th colspan="3">Weight</th>
<th>Volume</th>
</tr>
<tr>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
<th>sub header</th>
</tr>
</thead>
<tbody>
<tr>
<th>row header</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
with some style it render : http://fiddle.jshell.net/TLAV8/ http://jsfiddle.net/TLAV8/
164
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<body>
<table class="table-bordered">
<col>
<col>
<col>
<colgroup span="4"></colgroup>
<col>
<tr>
<th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
<th colspan="3" style="horizontal-align : middle;text-align:center; width: 50%;">Items</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
</tr>
<tr>
<th scope="col">Order</th>
<th scope="col">Received</th>
<th scope="col">Accepted</th>
</tr>
<tr>
<th>1</th>
<td>Watch</td>
<td>Analog</td>
<td>100</td>
<td>75</td>
<td>25</td>
<td>Not Functioning</td>
</tr>
<tr>
<th>2</th>
<td>Pendrive</td>
<td>5GB</td>
<td>250</td>
<td>165</td>
<td>85</td>
<td>Not Working</td>
</tr>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
