How do I create a table like this by using of colspan and rowspan-CodePudding

How do I create a table like this by using of colspan and rowspan enter image description here

CodePudding user response：

<body>
<table>
    <th colspan="9">ABC</th>
    <tr>
        <td colspan="3">Mango</td>
        <td colspan="3">Apple</td>
        <td colspan="3">Orange</td>
    </tr>
    <tr>
        <td>ID</td>
        <td>Seed</td>
        <td>Plant</td>
        <td>ID</td>
        <td>Seed</td>
        <td>Plant</td>
        <td>ID</td>
        <td>Seed</td>
        <td>Plant</td>
    </tr>
</table>
<style>
    table,tr,td{
      border-collapse: collapse;
      border: solid 1px;
      text-align: center;
      font-size: 50px;
    }
</style>

CodePudding user response：

use rowspan & colspan

    <table style="width:100%">
        <tr>
            <th colspan="10">Data I</th>
            <th colspan="10">Data II</th>
            <th colspan="2">Data</th>
        </tr>
        <tr>
            <td colspan="3">Data I a</td>
            <td colspan="3" style="background-color:red">Data I b</td>
            <td colspan="3">Data I c</td>
            <td rowspan="2">VIP</td>
            <td colspan="3">Data II a</td>
            <td colspan="3">Data II b</td>
            <td colspan="3">Data II c</td>
            <td rowspan="2">VIP</td>
            <td rowspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td style="background-color:red">1</td>
            <td style="background-color:red">2</td>
            <td style="background-color:red">3</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
</table>