HTML Table幫助交替顯示單元格數
[英]HTML Table help alternating number of cells
問題描述
如果要替換每行中的單元格數量，正確的HTML是什么？ 我想要2個單元格是第1行，第3行，第2行，第2行，第3行，第4行等...類似於磚牆。 到目前為止，我已經掌握了這個功能，但是它並沒有呈現我想要的效果。 我知道我可以做這個嵌套表，但是我可以用一個表做嗎？
<table border="1" cellpadding="10">
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
<tr>
<td colspan="1.5"> <span> X </span> </td>
<td colspan="1.5"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
</tr>
</table>
4 個解決方案
解決方案1
4 已采納 2009-10-24 21:32:14
您不能具有像元跨度的小數寬度。 相反，您需要找到上下限范圍內行數的最小公分母。 在您的示例中，2和3（即6）-因此表的寬度為6個單元格，偶數行分別跨越3，奇數行分別跨越2。
<table width="360">
<tr>
<td align="center" width="180" colspan="3">x</td>
<td align="center" width="180" colspan="3">x</td>
</tr>
<tr>
<td align="center" width="120" colspan="2">x</td>
<td align="center" width="120" colspan="2">x</td>
<td align="center" width="120" colspan="2">x</td>
</tr>
</table>
請注意，表格寬度很容易被2和3整除，並且在每個單元格中都明確設置了寬度。
解決方案2
0 2009-10-24 21:38:57
一種方法是通過CSS。 您將設置一個所需的表（例如4x4），然后將其適當地應用於每個單元格。 將有兩種樣式，磚塊和空的，一種表示“磚”，另一種表示空的空間。
因此，您可以執行以下操作：
<html>
<head>
<style type="text/css">
td { border-style:none; width:30px; }
td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick"> </td><td></td><td></td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td></td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td><td></td></tr>
<tr><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td><td class="brick"> </td></tr>
</table>
</body>
</html>
解決方案3
-1 2009-10-24 21:32:06
<table>
<tr>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td>Y</td>
</tr>
<tr>
<td>Y</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
<td colspan="2">X</td>
</tr>
解決方案4
-1 2009-10-24 21:34:25
我非常確定colspans必須具有整數值，不允許使用小數。 您可以嘗試在3單元格行上添加寬度為0，填充為0，邊距為0的虛擬單元格。
<tr>
<td colspan="2"> <span> X </span> </td>
<td colspan="2"> <span> X </span> </td>
</tr>
<tr>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td> <span> X </span> </td>
<td><!-- dummy !--></td>
</tr>
幫助解決HTML驗證錯誤：“表格”列的開頭沒有單元格
[英]Help with HTML validation error: Table column has no cells beginning in it
HTML表格，每行中包含不同數量的單元格：如何在單元格中均勻分隔單元格？
[英]HTML table with different number of cells in each row: how to space the cells evenly in their row?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.