2010-10-01 40 views
29

像Excel表我可以在第一行HTML表在不同的行

  1. 2列不同的列數
  2. 1的第二行

在長列是這種可能在html?

+2

這是方法? – 2010-10-01 10:54:52

回答

82

在你不熟悉colspan實現,我認爲你也不熟rowspan,所以我想我會扔在免費的。

一個重要的一點要注意,使用rowspan時:以下tr元素必須包含因爲以前的行(或以前)使用rowspan細胞較少td元素。

CSS:

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

HTML:

<table> 
    <thead> 
     <tr> 
      <th colspan="2">Column one and two</th> 
      <th>Column three</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="2" colspan="2">A large cell</td> 
      <td>a smaller cell</td> 
     </tr> 
     <tr> 
      <!-- note that this row only has _one_ td, since the preceding row 
       takes up some of this row --> 
      <td>Another small cell</td> 
     </tr> 
    </tbody> 
</table> 

演示於:jsbin

+20

這是我討論過的HTML表格中最*熱情的*,以及我聽過的熱情迴應...... =) – 2010-10-01 11:17:06

+1

發現這個演示內容非常豐富:http://www.w3schools.com/tags/ tryit.asp?文件名= tryhtml_table_span – unmircea 2014-09-26 14:33:40

14

colspan屬性:

<table> 
    <tr> 
     <td> Row 1 Col 1</td> 
     <td> Row 1 Col 2</td> 
</tr> 
<tr> 
     <td colspan=2> Row 2 Long Col</td> 
</tr> 
</table>