如何操纵桌子到这个形状？

Question

我需要在HTML中创建这个形状。 我刚刚了解了colspan和rowspan，但这让我心烦意乱...... 谢谢你的帮助。

表：

Answer 1

您无法合并倒L形的td。相反，这可以通过调整边框样式来完成。

＆＃13;

＆＃13;

table {
border-collapse: collapse;
}

＆＃13;

<table width="300" border="1px">
<tr>
    <td colspan="2" height="30" style="border-bottom: 0">
        &nbsp;
    </td>
</tr>
<tr>
    <td width="30" style="border-top: 0">
        &nbsp;
    </td>
    <td height="200">
        &nbsp;
    </td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

没有rowspan或colspan，:first-child和+选择器也可以提供帮助。

no matters the numbers of row or column ;)

table {
  border-collapse:collapse;
  border:solid;
}
th, td {
  min-width:3em;
  height:3em;
}

tr td:first-child {
  border-right:solid;
}
th + th {
  border-bottom:solid
}

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>