帶有3個標題和colspan的Html表-有解無憂

我希望我的 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|
|--------------------------------------------------------------------------------------|
\--------------------------------------------------------------------------------------/

uj5u.com熱心網友回復：

你可以試試這個：

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>

uj5u.com熱心網友回復：

要具有相同的格式，請使用以下內容：

<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獲得結果。

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375092.html

標籤：html css html-table

上一篇：洗掉并覆寫csspopover

下一篇：如何用1個大柱子制作2x2