Html table 与 3 headers 和 colspan

Html table with 3 headers and colspan

我希望我的 html table 有 3 个 headers,其中第二个和第三个 headers 应该按照我下面的描述进行划分。我尝试使用 colspan 但无法创建它。需要帮助。

/--------------------------------------------------------------------------------------\
|             |     Two    |                           Three                           |               
|  One        |------------|-----------------------------------------------------------|  
|             |    Two A   |    Three A   |    Three B   |    Three C   | Three        |      
|-------------|------------------------------------------------------------------------|
|One A | One B| Col 1|Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2| Col 1 | Col 2|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head> 
      
    <body> 

        <table> 
            <tr> 
                <th colspan="2" rowspan="2">One</th>
                <th colspan="2">Two    </th>
                <th colspan="10">Three                           </th>
            </tr> 
            <tr> 
                <th colspan="2">Two A</th>
           
                <th colspan="2">Three A</th>
                <th colspan="2">Three B</th>
                <th colspan="2">Three C</th>
                <th colspan="2">Three D</th>
  
            </tr> 
            <tr> 
                <td>One A</td> 
                <td>One B</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1 </td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col2</td>
                <td> Col 1</td>
                <td> Col 2</td>
            </tr>
            <tr> 
                <td>One A</td> 
                <td>One B</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1 </td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col 2</td>
                <td>Col 1</td>
                <td>Col2</td>
                <td> Col 1</td>
                <td> Col 2</td>
            </tr>

        </table> 
    </body> 
</html>  

</body>
</html>

要使用相同的格式,请使用以下内容:

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">One</td>
    <td colspan="2">Two</td>
    <td colspan="8">Three</td>
  </tr>
  <tr>
    <td colspan="2">Two A</td>
    <td colspan="2">Three A</td>
    <td colspan="2">Three B</td>
    <td colspan="2">Three C</td>
    <td colspan="2">Three</td>
  </tr>
  <tr>
    <td>One A</td>
    <td>One B</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

您需要使用 colspanrowspan 来获得结果。

你可以试试这个:

body{
            margin:10px;
      }

      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        padding:5px;
      }
<table style="width:100%">
  <tr>
    <th rowspan="2" colspan="2">One</th>
    <th colspan="2">two</th> 
    <th colspan="8">Three</th>
  </tr>
  <tr>
    <td colspan="2">Two A</td>
    <td colspan="2">Three A</td>
    <td colspan="2">Three B</td>
    <td colspan="2">Three C</td>
    <td colspan="2">Three D</td>
  </tr>
  <tr>
    <td>One A</td>
    <td>One B</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td colspan="12"></td>
  </tr>
</table>