6.4 表格的用法

 

表格

 

组合标签     table   tr  td

table基本格式:<table>属性1="属性值1" 属性2="属性值2" 属性3="属性值3">表格内容</table>

Table属性

                Width  宽度    默认按照内容来

               Cellpadding   边距

                 内容和边框的距离

               Cellspacing   间距

              单元格和单元格的距离

border:边框属性。边框宽度值。不定义边框属性,表格就不显示边框。

Tr和td的属性

        Width

        Height

        align:表格对齐方式  left|center|right

其他标签:

       Th和td是同级标签     表头

       Caption和tr是同级标签       表格标题

合并单元格(靠占位)  单元格的属性

横向合并  colspan(向右合并)

垂直合并  rowspan(向下合并)

 对合并单元格有一定的了解,在练习方面也有了头绪,希望越做越好!

作业练习:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    td{ height: 30px}
</style>
</head>

<body>
<table align="center">
    <tr>
        <td>受理员业务统计表</td>
    </tr>
</table>
<table align="right">
    <tr>
        <td>2017-01-02---2017-05-02</td>
    </tr>
</table>
<table border="1" width="100%" height="50%">
    <tr>
        <th rowspan="2">受理员</th>
        <th rowspan="2">受理数</th>
        <th rowspan="2">自办数</th>
        <th rowspan="2">直接解答</th>
        <th colspan="2">拟办意见</th>
        <th colspan="2">返回修改</th>
        <th colspan="3">工作类型</th>
    </tr>
    <tr>
        <td>同意</td>
        <td>比例</td>
        <td>数量</td>
        <td>比例</td>
        <td>建议件</td>
        <td>诉求件</td>
        <td>咨询件</td>
    </tr>
    <tr>
        <th rowspan="9">受理处</th>
        <td>王艳</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>    
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <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>    
    </tr>
    <tr>
        <th rowspan="9">话务组</th>
           <td>王艳</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
    </tr>
    <tr>
            <td>王艳</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
    </tr>
    <tr>
        <td>王艳</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td>王艳</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        
    </tr>
    <tr>
            <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>

 

运行结果:

所遇问题:

在练习期间碰到很多问题,对表格使用不太熟练,在规整代码时出错,错行之类的问题;

还是要多加练习,熟记所学知识点,掌握代码运用!

 

 

下面是对理工大学官网页面进行的一个简单操作:

 

运行结果如下:

 

posted @ 2018-06-04 16:39  文昭  阅读(131)  评论(0编辑  收藏  举报