使用rowspan和colspan的複雜表格

我必須製作一張非常複雜的表格，類似於下圖中的表格。 http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png 使用rowspan和colspan的複雜表格

我試過這個標記，但它不能正常工作。 http://jsfiddle.net/miskolc/W9nJU/3/

<body> 
     <table border="10" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td colspan="1" rowspan="1">1</td> 
      <td colspan="2" rowspan="1">2</td> 
      <td colspan="2" rowspan="1">3</td> 
     </tr> 
     <tr> 
      <td colspan="2" rowspan="4">4</td> 
      <td colspan="3" rowspan="2">5</td> 
     </tr> 
     <tr> 
      <td colspan="2" rowspan="2">6</td> 
      <td colspan="1" rowspan="4">7</td> 
     </tr> 
     <tr> 
      <td rowspan="4" colspan="1">8</td> 
      <td rowspan="1" colspan="1">9</td> 
      <td rowspan="1" colspan="1">10</td>    
      <td rowspan="2" colspan="1">11</td>    
     </tr> 
     <tr> 
      <td rowspan="1" colspan="2">12</td> 
     </tr> 
     <tr> 
      <td rowspan="3" colspan="1">13</td> 
      <td rowspan="1" colspan="3">14</td> 
     </tr> 
     <tr> 
      <td rowspan="1" colspan="2">15</td> 
      <td rowspan="1" colspan="1">16</td> 
     </tr> 
     <tr> 
      <td rowspan="1" colspan="2">17</td> 
     </tr> 
     </table> 
    </body>

和CSS

td { 
    width:50px; 
    height:50px; 
    padding:0px; 
}

我不明白爲什麼小區6保持在同一行小區5，即使它們是內部的不同TR標籤。我也不明白爲什麼單元格1,2,3沒有正確的大小。有人可以告訴我如何解決這個問題嗎？

來源

2013-05-22 Dragos C.

您顯示的預覽JPG是一個「5列」寬的模板。我建議你先從5個相等的td開始。然後從頂部開始製作其他行。 – Michael

您的表應該是每8行表5列（合併多個單元格之前）。

~~你所有的行應該總共有5列（或colspan="2"後面跟着colspan="3"的例子）。這是前兩種情況，但從第三種到最後一種是錯誤的。~~

~~沒有提琴我不會爲你做;）請提供一個小提琴在表格爲5C X 8R是是否存在（S）的問題~~

編輯：OK解決了它在這裏：http://jsfiddle.net/W9nJU/5/

的主要問題是與第二和第三行：雖然他們已經一個兩層高的顯示，使的印象時，他們佔據了4行，他們應該 - 沒有他們必須 - 只進行每排1排。
因此，左側的3個單元「1,4和8」跨越了垂直方向。 1,2和5個單元格（但是單元格4的高度是一個單元格的高度的兩倍，它也將跨越兩行）。
修改：單元格「4」跨越2行（不是4）; 「5」和「6」沒有垂直跨度和響應。跨越2和3列;細胞「7」跨越3行（未4）
細胞「8」跨越5行，而不是4
我認爲有，標記爲「9」的細胞內 - 1「17」另一值關但我再也找不到它了。也許不會。

您不是在具有固定尺寸網格或棋盤的紙張上繪圖。 HTML表格有點像拓撲結構，其大小並不重要，環，杯，圓環和土星環具有相同的特徵：「它只是一個圓環」（如果土星環不是由一百萬戒指由塊做成......我的比喻不是很好）
當HTML表格算法從HTML代碼構建單元格，行和列時（甚至可以在缺少幾個單元格的情況下這樣做），它不知道它們在圖形瀏覽器或打印機上的大小。屏幕閱讀器可以不關心這一點。重要的是所需的電池數量最少。 CSS然後使用結果來設置樣式並顯示它。

來源

2013-05-22 13:54:42 FelipeAls

基於單行高度，我會說這個模板實際上是10行高。我錯了嗎？ – Michael

爲什麼第三個需要更多列？我認爲我已經在第二行指定的單元格有（2 + 1）加2。我如何設置行數和列數？ –

@邁克爾2行將是雙高度，是的。但你只需要8個'tr'來實現這個 – FelipeAls

使用rowspan和colspan的複雜表格

回答

相關問題