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

Question

我需要在HTML中创建这个形状。 我刚刚了解了colspan和rowspan，但是这让我吃惊...... 感谢您的帮助。

表：

Answer 1

不能合并像倒L形的TD。相反，这可以通过调整边框样式来完成。

table { 
 
border-collapse: collapse; 
 
}

<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>

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> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t \t <th></th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t \t <td></td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>