Can I Have One Html Table Header Be Over Two Table Columns? Like Merge And Center In Excel?

I want to have one table header be centered over two table columns side by side. Is this possible?

Solution 1:

<th colspan="2">. This .</th>

To extrapolate a bit...

<table><thead><tr><th>Single Column</th><thcolspan="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.

Solution 2:

If you only have 2 columns then I would suggest using <caption>. Otherwise, use colspan as suggested in other answers.

<table>
  <caption>This will spanallcolumns.</caption>
  <tr><td>column one</td><td>column two</td></tr>
</table>

Solution 3:

Of course. Please refer to this page. You are looking for attribute called colspan for table headers cells.

Solution 4:

We can do it in better way.

<tableborder="1"><tr><thcolspan="1"scope="colgroup">Test Heading</th><thcolspan="3"scope="colgroup">Mars</th><thcolspan="3"scope="colgroup">Venus</th><thcolspan="3"scope="colgroup">Test</th></tr><tr><throwspan="2"></th><thscope="col">Produced</th><thscope="col">Sold</th><thscope="col">Sold</th><thscope="col">Produced</th><thscope="col">Sold</th><thscope="col">Sold</th><thscope="col">Test 1</th><thscope="col">Test 2</th><thscope="col">Test 3</th></tr></table>

Please visit Table Ref From w3.org if you want to know more.