一霜医、基礎(chǔ)表格

<table> 表格
<tr> 行
<td>列</td>
</tr>
</table>

截屏2020-07-03下午2.26.22.png

基礎(chǔ)語(yǔ)法與結(jié)構(gòu)

截屏2020-07-03下午2.28.07.png

<!-- 創(chuàng)建兩行三列的表格 -->
<table border="1">
    <tr>
        <td>2014年</td>
        <td>2015年</td>
        <td>1016年</td>
    </tr>

    <tr>
        <td>6000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>

</table>

截屏2020-07-03下午2.34.22.png

表格操作

帶表頭單元格

截屏2020-07-03下午2.28.07.png

帶標(biāo)題的表格

截屏2020-07-06上午10.07.55.png

截屏2020-07-06上午10.13.45.png

截屏2020-07-06上午10.14.37.png

<table>表格屬性

截屏2020-07-06上午10.21.51.png

width 設(shè)置整個(gè)表格的寬度
border 設(shè)置表格外邊框的寬度
Bgcolor 表格背景色
cellpadding 單元格與內(nèi)容之間的寬度
cellspacing 單元格之間的空白
frame 外邊框顯示方式
rules 內(nèi)邊框顯示方式

截屏2020-07-06上午10.30.32.png

截屏2020-07-06上午10.32.56.png

<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="5" cellpadding="5px" align="center" frame="box" rules="rows">
    <caption>這是個(gè)表格標(biāo)題</caption>
    <thead>
        <tr>
        <td>城市</td>
        <td colspan="">2014年</td>
        <td>2014年</td>
        <td>2015年</td>
        <td>2016年</td>
    </tr>

<tr>
    <td>城市</td>
        <td>上半年</td>
        <td>下半年</td>
        <td>2015年</td>
        <td>2016年</td>
    </tr>
    </thead>
    
    <tbody>
    <tr>
        <td>北京</td>
        <td>6000</td>
        <td>6000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    <tr>
        <td>上海</td>
        <td>6000</td>
        <td>60000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>合計(jì)</td>
        <td>6000</td>
        <td>7000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    </tfoot>

</table>

<tr>標(biāo)簽屬性

截屏2020-07-06上午10.46.40.png

截屏2020-07-06上午10.50.05.png

截屏2020-07-06上午10.52.21.png

截屏2020-07-06上午10.54.36.png

截屏2020-07-06上午11.01.38.png

截屏2020-07-06上午11.09.03.png

<table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" >
    <caption>這是個(gè)表格標(biāo)題</caption>
    <tdead align="center" valign="center">
        <tr bgcolor="#d8e4bc">
        <th rowspan="2">城市</th>
        <th colspan="2">2014年</th>
        <th rowspan="2">2015年</th>
        <th rowspan="2">2016年</th>
    </tr>

<tr bgcolor="#d8e4bc">

        <th>上半年</th>
        <th>下半年</th>
    </tr>
    </tdead>
    
    <tbody align="center" valign="center">
    <tr>
        <td bgcolor="#b8cce4" align="center" valign="center">北京</td>
        <td>6000</td>
        <td>6000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    <tr>
        <td bgcolor="#b8cce4" align="center" valign="center">上海</td>
        <td>6000</td>
        <td>60000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    </tbody>

    <tfoot>
    <tr align="center" valign="center">
        <td height="30px" bgcolor="#b8cce4">合計(jì)</td>
        <td>6000</td>
        <td>7000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    </tfoot>

</table>

截屏2020-07-06上午11.16.12.png

表格的嵌套

截屏2020-07-06上午11.15.03.png

總結(jié)：
1材义，盡量少的使用表格的嵌套
2咳榜，盡量少的使用表格的跨行跨列
（維護(hù)成本較高）