html的table标签

table标签应用还是非常广泛的，尤其是展示数据比较多的时候，展示效果非常好，清晰简答，所以公司的后台管理系统几乎每个界面都包含form表单和table表格

细线表格

<!--细线表格，通过设置表格的单元格的内外边距为0实现细线表格不能成功，-->
<table border="1" width="300px" height ='100px' align="center" cellspacing="0" cellpadding="0">
    <tr align="center" valign="bottom">
        <!--给td设置高度和宽度会修改当前单元格的宽度和高度-->
        <td>第一行第一个</td>
        <td>第一行第二个</td>
    </tr>
    <tr>
        <td>第二行第一个</td>
        <td>第二行第二个</td>
    </tr>
</table>

错误的细线表格.png

不能成功的原因是每个单元格都有边，这样这是把两个边合成了一个边，看起来依然很粗

<table width="300px" height ='100px' align="center" cellspacing="1" bgcolor="black">
    <tr align="center" valign="cente" bgcolor="white">
        <!--给td设置高度和宽度会修改当前单元格的宽度和高度-->
        <td>第一行第一个</td>
        <td>第一行第二个</td>
    </tr>
    <tr align="center" valign="center" bgcolor="white">
        <td>第二行第一个</td>
        <td>第二行第二个</td>
    </tr>
</table>

正确的细线表格.png

通过给table设置背景颜色，然后给tr设置背景颜色和单元格的之间间距，让table的背景通过间距透过来。

table单元格合并

合并总是向下或者向右合并。rowspan 垂直合并。colspan 水平合并。
在有rowspan或者colspan的单元格，把该单元格当成n个处理，n是它的属性值，因为n大于1导致其他原来的位置的向后挤出来，所以该删的要删。

• 案例

<table width="300px" height="100px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <!--将单元格在横向当成两个，所以要删除一个td-->
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <!--因为垂直合并-->
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <!--所以这里要删除一个-->
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
</table>

单元格合并练习.png

<table width="300" height="100" bgcolor="black" cellspacing="1">
    <caption>合并单元格自己练习</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>

单元格合并练习2.png