您可以使用colspan
创建跨越多列的单元格。
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
如果您希望所有的宽度和高度都相同,但只有单元格数量不同,您可以不设置<table>
.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
更新
您对图像的更新,是的,您可以使用以下方法完成此操作colspan
:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
这使用了四列,中间的两列比其他列小,这是一个说明如何设置列的图像:
更新#2
这是一个更随机大小的单元格的示例。第一行 10%、90%,第二行 55%、45%。
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}