1. 首頁
  2. 問答
  3. 如何在HTML表格中使用colspan和rowspan？

如何在HTML表格中使用colspan和rowspan？

2012-03-22 128 views
68

我不知道如何合併HTML表格中的行和列。如何在HTML表格中使用colspan和rowspan？

Example

能否請你幫我用HTML做這樣的表？

來源

2012-03-22 Ockonal

+0

合併它們對？你的意思是「colspan」？ – animuson 2012-03-22 21:07:34

+0

@DavidThomas我可以製作5行3列的表格。但我真的不知道應該在哪裏應用rowspan等。 – Ockonal 2012-03-22 21:07:56

+13

@DAvid：看起來非常清楚，提問者不知道從哪裏開始，有時很難，當你甚至不知道你正在尋找的屬性對於存在的情況（在這種情況下是rowspan） – 2012-03-22 21:10:18

回答

88

我建議：

table { 
 
    empty-cells: show; 
 
    border: 1px solid #000; 
 
} 
 

 
table td, 
 
table th { 
 
    min-width: 2em; 
 
    min-height: 2em; 
 
    border: 1px solid #000; 
 
}
<table> 
 
    <thead> 
 
     <tr> 
 
      <th rowspan="2"></th> 
 
      <th colspan="4">&nbsp;</th> 
 
     </tr> 
 
     <tr> 
 
      <th>I</th> 
 
      <th>II</th> 
 
      <th>III</th> 
 
      <th>IIII</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td></td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

參考文獻：

來源

2012-03-22 21:09:52

+2

不要忘了添加漂亮的顏色。 – Blazemonger 2012-03-22 21:11:31

+27

在這種情況下，我給讀者留下了'漂亮的顏色'作爲練習。 – 2012-03-22 21:19:44

3

您可以在td元素上使用rowspan="n"使其跨越n行和colspan="m"，使其跨越m列。

看起來像你的第一個TD需要一個rowspan="2"和下一個TD需要一個colspan="4"。

來源

2012-03-22 21:07:51

5

如果您想要擴展單元格和colspan以擴展跨越，請使用rowspan。

來源

2012-03-22 21:08:05 Wadester

1 
<style type="text/css"> 
    table { border:2px black dotted; margin: auto; width: 100%; } 
    tr { border: 2px red dashed; } 
    td { border: 1px green solid; } 
</style> 
<table> 
    <tr> 
     <td rowspan="2">x</td> 
     <td colspan="4">y</td> 
    </tr> 
    <tr> 
     <td>I</td> 
     <td>II</td> 
     <td>III</td> 
     <td>IV</td> 
    </tr> 
    <tr> 
     <td>nothing</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

來源

2012-03-22 21:12:35 hjpotter92

0 
<body> 
<table> 
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr> 
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr> 
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr> 
</table> 
</body>

來源

2012-03-22 21:15:36 Wadester

94

如果你困惑表格佈局是如何工作的，他們基本上開始在x = 0，Y = 0和整個工作的路。讓我們用圖形來解釋，因爲它們非常有趣！

當您啓動一個表格時，您將創建一個網格。您的第一行和單元格將位於左上角。把它看作一個數組指針，向右移動每個遞增的x值，然後向下移動每個遞增的y值。

對於你的第一行，你只定義了兩個單元格。一個橫跨兩行，一個橫跨四列。所以，當你達到你的第一行的結尾，它看起來是這樣的：

Preview #0001

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
</table>

現在該行已經結束，「數組指針」跳下到下一行。由於x位置0已經被前面的單元佔用，x跳轉到位置1以開始填充單元。 *請參閱有關rowspans之間差異的說明。

此行有四個單元格，它們都是1x1塊，填充它上面的行的相同寬度。

Preview #0002

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

下一行中所有1x1細胞。但是，例如，如果你添加了一個額外的單元呢？那麼，它會跳出右邊的邊緣。

Preview #0003

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

*但是，如果我們不是（而不是增加額外的電池）所做的所有這些細胞具有2行跨度？這裏需要考慮的是即使你不打算在下一行添加更多的單元格，該行仍然必須存在（即使它是空行）。如果您確實嘗試在該行之後立即添加新的單元格，您會注意到它將開始將它們添加到底部行的末尾。

Preview #0004

<table> 
    <tr> 
     <td rowspan="2"></td> 
     <td colspan="4"></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
</table>

享受創建表的奇妙世界！

來源

2012-03-22 21:29:37 animuson

+4

考慮使用PNG而不是JPG來進行插圖。 – 2015-02-28 17:34:14

+0

非常感謝。我從來沒有過多地處理表格，但是現在我偶然發現了一個問題，即真正的表格數據必須以相當複雜的表格結構呈現。感謝您的解釋，我終於明白了行/列跨度是如何工作的。 – 2015-02-28 19:19:04

+0

預覽圖像被破壞.. – hyip 2016-02-20 16:58:28

0

它如果有人正在尋找雙方的左側和右側的行跨度類似於你的表

<table border=1 width=50%> 
<tr> 
    <td rowspan="2">x</td> 
    <td colspan="4">y</td> 
</tr> 
<tr> 
    <td bgcolor=#FFFF00 >I</td> 
    <td>II</td> 
    <td bgcolor=#FFFF00>III</td> 
    <td>IV</td> 
</tr> 
<tr> 
    <td>empty</td> 
    <td bgcolor=#FFFF00>1</td> 
    <td>2</td> 
    <td bgcolor=#FFFF00>3</td> 
    <td>4</td> 
</tr>

來源

2012-03-23 10:44:01 Ha3Ha3Ha3

9

， 這裏是你如何能做到這一點：

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="2">LEFT</td> 
 
     <td> 1 </td> 
 
     <td> 2 </td> 
 
     <td> 3 </td> 
 
     <td> 4 </td> 
 
     <td rowspan="2">RIGHT</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 5 </td> 
 
     <td> 6 </td> 
 
     <td> 7 </td> 
 
     <td> 8 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

或者，如果你想左，右添加到現有的行集，您可以在之間有倒塌colspan在投擲他們得到相同的結果：

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
}
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="3">LEFT</td> 
 
     <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td> 
 
     <td rowspan="3">RIGHT</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 1 </td> 
 
     <td> 2 </td> 
 
     <td> 3 </td> 
 
     <td> 4 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 5 </td> 
 
     <td> 6 </td> 
 
     <td> 7 </td> 
 
     <td> 8 </td> 
 
    </tr> 
 
    <tr> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
     <td> - </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2014-03-08 20:59:44 Lane

相關問題

 相關問題