第4天-表格

table tr td

table为表格标签，tr表示一行，td表示一行里面的某个单元格，通常用在后台管理系统数据表格的显示

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>成绩</td>
        <td>等级</td>
    </tr>
    <tr>
        <td>20080795113</td>
        <td>李菲</td>
        <td>3</td>
        <td>12</td>
        <td>不及格</td>
    </tr>
    <tr>
        <td>20080795114</td>
        <td>张菲</td>
        <td>3</td>
        <td>82</td>
        <td>良好</td>
    </tr>
    <tr>
        <td>20080795114</td>
        <td>王菲</td>
        <td>3</td>
        <td>32</td>
        <td>不及格</td>
    </tr>
</table>
表格示例

注意：在table的开始标签后面加上border cellspacing cellpadding,这种形式叫做给html标签添加属性

border表示边框

cellspacing表示单元格之间的间隙

cellpadding表示单元格内容和边框之间的距离

 合并单元格

colspan设置当前单元格在水平方向上合并单元格的个数

<table border="1px" width="300px" cellspacing="0" cellpadding="0">
    <tr>
        <td>姓名</td>
        <td>张山</td>
        <td>年龄</td>
        <td>20</td>
    </tr>
    <tr>
        <td>个人简介</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td>专业技能</td>
        <td colspan="3"></td>
    </tr>
</table>
colspan

rowspan设置当前单元格垂直方向上合并单元格的个数

<table border="1px" cellspacing="0" cellpadding="0">
    <tr>
        <td>姓名</td>
        <td>张三</td>
        <td>年龄</td>
        <td>12</td>
        <td rowspan="3">
            <img src="img/head.jpg" />
        </td>
    </tr>
    
    <tr>
        <td>籍贯</td>
        <td>中国</td>
        <td>民族</td>
        <td>汉族</td>
    </tr>
    
    <tr>
        <td>出生日期</td>
        <td>1999.3.4</td>
        <td>政治面貌</td>
        <td>党员</td>
    </tr>
</table>
rowspan

练习-个人简历

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>

            .resume{
                width: 792px;
                background-color: #f2f2f2;
                border: 1px solid black;
        
            }
            
            .resume .resume-title{
                background-color: #be1e4a;
                color: white;
                font-size: 25px;
                font-weight: bold;
                text-align: center;
            }
            
            .resume td{
                height: 53px;
                width: 159px;
                
                color: #666666;
                font-size: 14px;
                text-align: center;
                
            }
            
            .resume .resume-head{
                vertical-align: top;
            }
            
            .resume .resume-connect{
                text-align: left;
            }
            

        </style>
    </head>
    <body>
        
        <table class="resume" border="1px" cellspacing="0" cellpadding="0">
            <tr>
                <td colspan="5" class="resume-title">个人简历</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>李琳琳</td>
                <td>出生年月</td>
                <td>1992.2.18</td>
                <td rowspan="5" class="resume-head">
                    <img src="img/head.jpg">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>女</td>
                <td>政治面貌</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>民族</td>
                <td>汉族</td>
                <td>籍贯</td>
                <td>四川</td>
            </tr>
            <tr>
                <td>学历</td>
                <td>本科</td>
                <td>毕业院校</td>
                <td>四川大学</td>
            </tr>
            <tr>
                <td>专业</td>
                <td>管理学</td>
                <td>毕业时间</td>
                <td>2014</td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="4">一个乐观积极的文艺女青年</td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td colspan="4">读书、旅游、跑步、摄影</td>
            </tr>
            <tr>
                <td>基本技能</td>
                <td colspan="4">战略分析，英语/td>
            </tr>
            <tr>
                <td rowspan="4">所修课程</td>
                <td>专业课</td>
                <td colspan="3">管理学 统计学 运筹学</td>
            </tr>
            <tr>
                <td>实践课</td>
                <td colspan="3">英特尔、戴尔实习</td>
            </tr>
            <tr>
                <td>公共课</td>
                <td colspan="3">会计学 财务管理</td>
            </tr>
            <tr>
                <td>选修课</td>
                <td colspan="3">演讲与口才</td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td colspan="4" class="resume-connect">18982859985 QQ：40878286</td>
            </tr>        
        </table>
        

    </body>
</html>
个人简历

注意问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/simplecss.css" />
        <style type="text/css">
                .box{
                    width: 600px;
                    height: 350px;
                    border: 1px solid red;
                    margin: 20px auto;
                }
                
                .table{
                    width: 100%;
                }
                
                .table th, .table td{
                    padding: 6px 12px;
                    border: 1px solid gray;
                    height: 50px;
                    text-align: center;
                }
                
                .table th{
                    background-color: cadetblue;
                    color: white;
                }
                
        </style>
        
    </head>
    <body>
    
            <div class="box">
                <table class="table">
                    <tr>
                        <th>编号</th>
                        <th>主机名</th>
                        <th>IP地址</th>
                        <th>机房</th>
                    </tr>
                    <tr>
                        <td>001</td>
                        <td>c1.heboan.com</td>
                        <td>192.168.88.1</td>
                        <td>本地机房</td>
                    </tr>
                    <tr>
                        <td>002</td>
                        <td>c2.heboan.com</td>
                        <td>192.168.88.2</td>
                        <td>本地机房</td>
                    </tr>
                    <tr>
                        <td>003</td>
                        <td>c3.heboan.com</td>
                        <td>192.168.88.3</td>
                        <td>本地机房</td>
                    </tr>
                </table>
            </div>
    </body>
</html>
表格

解决，修改.table样式

.table{
    width: 100%;
    border-collapse: collapse;  /*添加此属性*/
}

 

posted @ 2018-05-25 14:55  sellsa  阅读(149)  评论(0)  编辑  收藏  举报