具有 3 个标题和 colspan 的 Html 表答案

【问题标题】：Html table with 3 headers and colspan具有 3 个标题和 colspan 的 Html 表
【发布时间】：2022-01-11 15:51:04
【问题描述】：

我希望我的 html 表有 3 个标题，其中第二个和第三个标题应该分开，如下所示。我尝试使用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|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/

【问题讨论】：

标签： html css html-table

【解决方案1】：

<!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>

【讨论】：

谢谢大家。你的解决方案对我有用！

【解决方案2】：

要使用相同的格式，请使用以下内容：

<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>

您需要使用colspan 和rowspan 来获得结果。

【讨论】：

【解决方案3】：

你可以试试这个：

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>

【讨论】：