Can I have one HTML table header be over two table columns? Like merge and center in Excel?
Asked Answered
P

4

30

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

Pyongyang answered 25/1, 2012 at 0:41 Comment(0)
S
57

<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.

Sitin answered 25/1, 2012 at 0:43 Comment(0)
M
11

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>
Monochromatic answered 25/1, 2012 at 0:49 Comment(0)
A
5

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

Amoeba answered 25/1, 2012 at 0:45 Comment(0)
A
4

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.

Aboriginal answered 17/5, 2017 at 7:12 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.