I want to have one table header be centered over two table columns side by side. Is this possible?
Can I have one HTML table header be over two table columns? Like merge and center in Excel?
Asked Answered
<th colspan="2">. This .</th>
To extrapolate a bit...
<table>
<thead>
<tr>
<th>Single Column</th>
<th colspan="2">Double Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column One</td>
<td>Column Two</td>
<td>Column Three</td>
</tr>
</tbody>
</table>
That should give you enough to work from.
If you only have 2 columns then I would suggest using <caption>
. Otherwise, use colspan as suggested in other answers.
<table>
<caption>This will span all columns.</caption>
<tr><td>column one</td><td>column two</td></tr>
</table>
Of course. Please refer to this page. You are looking for attribute called colspan
for table headers cells.
We can do it in better way.
<table border="1">
<tr>
<th colspan="1" scope="colgroup">Test Heading</th>
<th colspan="3" scope="colgroup">Mars</th>
<th colspan="3" scope="colgroup">Venus</th>
<th colspan="3" scope="colgroup">Test</th>
</tr>
<tr>
<th rowspan="2"></th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Sold</th>
<th scope="col">Test 1</th>
<th scope="col">Test 2</th>
<th scope="col">Test 3</th>
</tr>
</table>
Please visit Table Ref From w3.org if you want to know more.
© 2022 - 2024 — McMap. All rights reserved.