将一个表头分成两行

Question

我有一张桌子，其中一个表头必须具有两行，而在第二行中还必须分为4列。简而言之，必须将一个头标签分成2行标签，然后再将第二行标签分成4个子标签。

<table class="table">
                    <thead>
                        <tr>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>A value</td>
                            <td>B value</td>
                            <td>C1 C2 C3 C4 value</td>
                            <td>D value</td>
                        </tr>
                    </tbody>
                </table>

I want something like this

Answer 1

您可以这样操作

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

more info https://www.w3.org/WAI/tutorials/tables/irregular/