How can I make an HTML table with subcolumns?

Question

I would like to make an HTML table that expresses the following structure:

ColumnHeading1            ColumnHeading2
SubHeading1A SubHeading1B SubHeading2A Subheading2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
data1A       data1B       data2A       data2B
...

How can I do this with tags like <table>,<tr>,<th>,<td>? I don't know how to align ColumnHeading2 with SubHeading2A.

score 3 · Answer 1 · edited Dec 29 '22 at 02:55

It is very simple. Copy the below code and get started

<table>
  <thead>
    <tr>
      <th colspan="2">head1</th>
      <th colspan="2">head1</th>
    </tr>
    <tr>
      <th>subhead</th>
      <th>subhead</th>
      <th>subhead</th>
      <th>subhead</th>
    </tr>
  </thead>
  <tbody>
    <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>  
      <td>data</td> 
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

score 1 · Answer 2 · answered Nov 03 '16 at 03:53

The colspan attribute will allow you to have table headings (th) and cells (td) that span multiple columns. Likewise, rowspan will allow headings and cells to span multiple rows.

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #888;
  padding: 0.25em 0.5em;
}

<table>
  <thead>
    <tr>
      <th colspan="2">ColumnHeading1</th>
      <th colspan="2">ColumnHeading2</th>
    </tr>
    <tr>
      <th>SubHeading1A</th>
      <th>SubHeading1B</th>
      <th>SubHeading2A</th>
      <th>SubHeading2B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
    <tr>
      <td>data1A</td>
      <td>data1B</td>
      <td>data2A</td>
      <td>data2B</td>
    </tr>
  </tbody>
</table>

How can I make an HTML table with subcolumns?

2 Answers2