使用合并列创建HTML表

Question

我想创建一个具有以下结构的表，但我不知道该怎么做。

| ----------扣除--------------------- | ------------- ---------激励------------ |

|第1列|第2栏|第3栏|第1栏|第2栏|第3栏|

DATROW 1 | DATROW 2 | DATROW 3 | DATROW 1 | DATROW 2 | DATROW 3 | DATROW 1 | DATROW 2 | DATROW 3 | DATROW 1 | DATROW 2 | DATROW 3 | DATROW 1 | DATROW 2 | DATROW 3 | DATROW 1 | DATROW 2 | DATROW 3 |

提前致谢

Answer 1

使用colspan来执行此操作。创建了一个片段，你可以帮助理解。

＆＃13;

＆＃13;

<table border='1'>
    <thead>
        <tr>
            <th colspan="3">Deduction</th>
            <th colspan="3">Incentive</th>
        </tr>
   
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
      
         </thead>
    <tbody>
      
      
        <tr>
            <td>DATROW 1</td>
            <td>DATROW 2</td>
            <td>DATROW 3</td>
            <td>DATROW 1</td>
            <td>DATROW 2</td>
            <td>DATROW 3</td>
        </tr>
      
        <tr>
            <td>DATROW 1</td>
            <td>DATROW 2</td>
            <td>DATROW 3</td>
            <td>DATROW 1</td>
            <td>DATROW 2</td>
            <td>DATROW 3</td>
        </tr>
    </tbody>
</table>    

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用<td> HTML标记（表格数据）中的colspan属性将两个或多个表格单元格合并在一起。例如，在下面的代码中是一个包含三行和三列的表。如果我们想将前两个单元格合并到一个单元格中，我们可以使用第一个colspan="2"标记中的<td>属性。该数字表示您要用于<td>代码的单元格数。

请参阅此链接 http://www.computerhope.com/issues/ch001655.htm

Answer 3

使用colspan HTML属性，您可以合并列。

所以，你可以这样做：

<table>
    <thead>
        <tr>
            <th colspan="3">Deduction</th>
            <th colspan="3">Incentive</th>
        </tr>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DATROW 1</td>
            <td>DATROW 2</td>
            <td>DATROW 3</td>
        </tr>
    </tbody>
</table>