table標(biāo)簽應(yīng)用還是非常廣泛的，尤其是展示數(shù)據(jù)比較多的時(shí)候，展示效果非常好，清晰簡(jiǎn)答，所以公司的后臺(tái)管理系統(tǒng)幾乎每個(gè)界面都包含form表單和table表格
細(xì)線表格
<!--細(xì)線表格，通過設(shè)置表格的單元格的內(nèi)外邊距為0實(shí)現(xiàn)細(xì)線表格不能成功，-->
<table border="1" width="300px" height ='100px' align="center" cellspacing="0" cellpadding="0">
<tr align="center" valign="bottom">
<!--給td設(shè)置高度和寬度會(huì)修改當(dāng)前單元格的寬度和高度-->
<td>第一行第一個(gè)</td>
<td>第一行第二個(gè)</td>
</tr>
<tr>
<td>第二行第一個(gè)</td>
<td>第二行第二個(gè)</td>
</tr>
</table>
錯(cuò)誤的細(xì)線表格.png
不能成功的原因是每個(gè)單元格都有邊，這樣這是把兩個(gè)邊合成了一個(gè)邊，看起來依然很粗
<table width="300px" height ='100px' align="center" cellspacing="1" bgcolor="black">
<tr align="center" valign="cente" bgcolor="white">
<!--給td設(shè)置高度和寬度會(huì)修改當(dāng)前單元格的寬度和高度-->
<td>第一行第一個(gè)</td>
<td>第一行第二個(gè)</td>
</tr>
<tr align="center" valign="center" bgcolor="white">
<td>第二行第一個(gè)</td>
<td>第二行第二個(gè)</td>
</tr>
</table>
正確的細(xì)線表格.png
通過給table設(shè)置背景顏色，然后給tr設(shè)置背景顏色和單元格的之間間距，讓table的背景通過間距透過來。
table單元格合并
合并總是向下或者向右合并。rowspan 垂直合并。colspan 水平合并。
在有rowspan或者colspan的單元格，把該單元格當(dāng)成n個(gè)處理，n是它的屬性值，因?yàn)閚大于1導(dǎo)致其他原來的位置的向后擠出來，所以該刪的要?jiǎng)h。
- 案例
<table width="300px" height="100px" bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<!--將單元格在橫向當(dāng)成兩個(gè)，所以要?jiǎng)h除一個(gè)td-->
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<!--因?yàn)榇怪焙喜?->
<td rowspan="2"></td>
<td></td>
</tr>
<!--所以這里要?jiǎng)h除一個(gè)-->
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
單元格合并練習(xí).png
<table width="300" height="100" bgcolor="black" cellspacing="1">
<caption>合并單元格自己練習(xí)</caption>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td rowspan="2" colspan="2"></td>
<td></td></tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
單元格合并練習(xí)2.png
