转自：菜鸟教程：HTML 表格
HTML code:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="center" class="biaoti" height="60">受理员业务统计表</td> </tr> <tr> <td align="right" height="25">2017-01-02---2017-05-02</td> </tr> </table> <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center"> <tr> <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td> <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td> <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td> <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td> <td colspan="2" class="btbg font-center titfont">拟办意见</td> <td colspan="2" class="btbg font-center titfont">返回修改</td> <td colspan="3" class="btbg font-center titfont">工单类型</td> </tr> <tr> <td width="8%" class="btbg font-center">同意</td> <td width="8%" class="btbg font-center">比例</td> <td width="8%" class="btbg font-center">数量</td> <td width="8%" class="btbg font-center">比例</td> <td width="8%" class="btbg font-center">建议件</td> <td width="8%" class="btbg font-center">诉求件</td> <td width="8%" class="btbg font-center">咨询件</td> </tr> <tr> <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td> <td width="7%" class="btbg2">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2 font-center">总计</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> </tr> <tr> <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td> <td width="7%" class="btbg2">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2">王艳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="btbg2 font-center">总计</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> <td class="btbg2 font-center">20</td> </tr> </table>
CSS code:
@charset "utf-8"; /* CSS Document */ .tabtop13 { margin-top: 13px; } .tabtop13 td{ background-color:#ffffff; height:25px; line-height:150%; } .font-center{ text-align:center} .btbg{background:#e9faff !important;} .btbg1{background:#f2fbfe !important;} .btbg2{background:#f3f3f3 !important;} .biaoti{ font-family: 微软雅黑; font-size: 26px; font-weight: bold; border-bottom:1px dashed #CCCCCC; color: #255e95; } .titfont { font-family: 微软雅黑; font-size: 16px; font-weight: bold; color: #255e95; background: url(../images/ico3.gif) no-repeat 15px center; background-color:#e9faff; } .tabtxt2 { font-family: 微软雅黑; font-size: 14px; font-weight: bold; text-align: right; padding-right: 10px; color:#327cd1; } .tabtxt3 { font-family: 微软雅黑; font-size: 14px; padding-left: 15px; color: #000; margin-top: 10px; margin-bottom: 10px; line-height: 20px; }
效果图：
