使用單個經典html表元素和rowspan / colspan創建此表
[英]Create this table using a single classic html table element and rowspan/colspan
問題描述
我試圖使用經典的HTML表結構創建一個看起來像這樣的表：
從左到右思考，我想到了以下HTML，這簡直是一場災難。 我想念什么嗎？
<html>
<body>
<table border = 1 width=640 height=480>
<tr>
<td rowspan=2 colspan=2>1</td>
<td rowspan=4 colspan=4>2</td>
<td rowspan=2 colspan=2>3</td>
<tr>
<td rowspan=2 colspan=2>4</td>
<td rowspan=2 colspan=2>5</td>
</tr>
<tr>
<td rowspan=4 colspan=4>6</td>
<td rowspan=2 colspan=2>7</td>
<td rowspan=1 colspan=1>8</td>
<td rowspan=1 colspan=1>9</td>
</tr>
<tr>
<td rowspan=1 colspan=1>10</td>
<td rowspan=1 colspan=1>11</td>
</tr>
<tr>
<td rowspan=2 colspan=2>12</td>
<td rowspan=2 colspan=2>13</td>
</tr>
</table>
</body>
</html>
2 個解決方案
解決方案1
3 2013-09-10 00:22:25
這是給您的代碼。 我希望這對您有用，因為我花了一個小時嘗試為您創建它。 （注意，HTML 5建議使用CSS，但是由於您只想在經典html中使用它，因此這里為您提供了解決方案）
<table width="800" height="400">
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
</table>
<table width="800" height="400">
<tr width="50%">
<td width="50%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="25%" bgcolor="#6CBB3C"></td>
<td width="25%" bgcolor="#6CBB3C" height="200pix" bgcolor="white">
<table width="100%" height="200pix" bordercolor="white"
bgcolor="white">
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
</table>
</td>
</tr>
<tr width="50%">
<td bgcolor="#6CBB3C"></td>
<td bgcolor="#6CBB3C"></td>
</tr>
</table>
這是給您的結果：
解決方案2
3 已采納 2014-08-02 20:00:11
一張用CSS樣式的表格。
的HTML
<table>
<tr>
<td class="green"></td>
<td colspan="2" rowspan="2" class="red"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td class="green"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="red"></td>
<td rowspan="2" class="green"></td>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="green"></td>
<td colspan="2" class="green"></td>
</tr>
</table>
的CSS
table {
table-layout: fixed;
border-collapse: collapse;
max-width: 8em;
width: 100%;
}
td {
border: 1px solid white;
}
.green {
background: rgb(155,187,89);
height: 2em;
width: 2em;
}
.red {
background: rgb(192,80,77);
height: 4em;
width: 4em;
}
.blue {
background: rgb(79,129,189);
height: 1em;
width: 1em;
}
結果
使用 rowspan 和 colspan 的 HTML 表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.