案例练习信息记录:
- 表格案例来源:菜鸟教程中的漂亮的表格。
- 使用知识: html
- 具体脚本呈现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>漂亮的表格</title> </head> <body> <!-- 思路分析:①有表题——<caption></caption> ②一条线——<hr/> ③数字文本(2017-01-02---2017-05-02)居右——align="right" ④18行*12列 --> <table border="1" cellspacing="0"> <caption>受理员业务统计表<hr/> <p style="text-align: right;">2020-05-11---2020-05-xx</p> </caption> <tr id="1"> <td rowspan="2" colspan="2">受理员</td> <td rowspan="2" >受理数</td> <td rowspan="2" >自办数</td> <td rowspan="2" >直接解答</td> <td colspan="2">拟办意见</td> <td colspan="2">返回修改</td> <td colspan="3">工单类型</td> </tr> <tr id="2"> <td>同意</td> <td>比例</td> <td>数量</td> <td>比例</td> <td>建议件</td> <td>诉求件</td> <td>咨询件</td> </tr> <tr id="3"> <td rowspan="8">受理处</td> <td>王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="4"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="5"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="6"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="7"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="8"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="9"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="10"> <td>总计</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> <tr id="11"> <td rowspan="8">话务组</td> <td>王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="12"> <td>王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="13"> <td>王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="14"> <td>王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="15"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="16"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="17"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr id="18"> <td>总计</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> <td>20</td> </tr> </table> </body> </html>
- 最终效果展示:
遇到的问题:目前对rowspan和colspan的理解不到位。后续仍需加强练习,完善最终效果。