HTML表格

一、基础表格

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

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

基础语法与结构

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

<!-- 创建两行三列的表格 -->
<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

带标题的表格

截屏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 设置整个表格的宽度
border 设置表格外边框的宽度
Bgcolor 表格背景色
cellpadding 单元格与内容之间的宽度
cellspacing 单元格之间的空白
frame 外边框显示方式
rules 内边框显示方式

截屏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>这是个表格标题</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>合计</td>
        <td>6000</td>
        <td>7000</td>
        <td>7000</td>
        <td>9000</td>
    </tr>
    </tfoot>

</table>

<tr>标签属性

截屏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>这是个表格标题</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">合计</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

总结：
1，尽量少的使用表格的嵌套
2，尽量少的使用表格的跨行跨列
（维护成本较高）