HTML合併單元格表

我有以下結構，我應該創建HTML表格。起初它對我來說似乎很容易，但是當我試圖建立它時，我花了很多時間沒有取得令人滿意的結果。請看下面的圖片來查看我想創建的表格類型。HTML合併單元格表

我試圖創建如下，但沒有運氣。

<table> 
 
    <caption>Browsers by Visitors</caption> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="3">Head One</th> 
 
     <th colspan="3" rowspan="2">Head Two</th> 
 
     <th colspan="3">Head Three</th> 
 
     <th rowspan="3">Head Four</th> 
 
     <th rowspan="3">Head Five</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Sub1</th> 
 
     <th>Sub2</th> 
 
     <th>Sub3</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Sub1</th> 
 
     <th>Sub2</th> 
 
     <th>Sub3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>AAA</td> 
 
     <td>BBB</td> 
 
     <td>CCC</td> 
 
     <td>DDD</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>a</td> 
 
     <td>b</td> 
 
     <td>c</td> 
 
     <td>d</td> 
 
    </tr> 
 
    <tr> 
 
     <td>12</td> 
 
     <td>23</td> 
 
     <td>34</td> 
 
     <td>34</td> 
 
    </tr> 
 
    <tbody> 
 
</table>

上面的代碼不起作用。請別人幫這裏...

來源

2016-08-04 MR.Internet

您顯示的圖像中的數據與您編碼的數據不同。你能否製作另一幅具有與HTML相同的數據的圖像，以使事情變得更簡單？ –

好了，所以這裏有雲：

table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 

 
th, td { 
 
    padding: 5px; 
 
    text-align: center; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
     <th rowspan="2">Head One</th> 
 
     <th colspan="3">Head Two</th> 
 
     <th colspan="3">Head Three</th> 
 
     <th rowspan="2">Head Four</th> 
 
     <th rowspan="2">Head Five</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Sub1</td> 
 
     <td>Sub2</td> 
 
     <td>Sub3</td> 
 
     <td>Sub1</td> 
 
     <td>Sub2</td> 
 
     <td>Sub3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>AAA</td> 
 
     <td>1</td> 
 
     <td>a</td> 
 
     <td>12</td> 
 
     <td>s</td> 
 
     <td>s</td> 
 
     <td>sd</td> 
 
     <td>aaa</td> 
 
     <td>asd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>BBB</td> 
 
     <td>2</td> 
 
     <td>b</td> 
 
     <td>23</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>asdasd</td> 
 
     <td>asdasd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>CCC</td> 
 
     <td>3</td> 
 
     <td>c</td> 
 
     <td>34</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>asdas</td> 
 
     <td>dsafsd</td>  
 
    </tr> 
 
    <tr> 
 
     <td>DDD</td> 
 
     <td>4</td> 
 
     <td>d</td> 
 
     <td>34</td> 
 
     <td>sd</td> 
 
     <td>sd</td> 
 
     <td>s</td> 
 
     <td>asdasd</td> 
 
     <td>asddasdf</td>  
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td>  
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td>  
 
    </tr> 
 
</table>

會盡力瞭解更多關於colspan，rowspan，th，tr，td，table崩潰邊緣here。我刪除了代碼中的thead和tbody。

來源

2016-08-04 03:32:18

HTML合併單元格表

回答

相關問題