[19/05/16-星期四] HTML_body标签(表格标签)

一、概念

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06 表格标签</title>
    </head>
    <body>
        <!--
        table 表示一个表格
            border :表格的边框 默认根据数据的大小进行扩充
            width和height 设置宽和高
            cellspacing：单元格间距 表格中单元格之间的距离;
            cellpadding：单元格内文字与边框的距离
            tr:代表1行 .th和td都能声明一个单元格
            th：表格的属性列 ,默认居中加黑显示
            td：表格的数据,默认居左显示原始数据
            
        -->
        <h3>学院教授</h3>
        <table border="1px" cellspacing="0" cellpadding="5px"> <!--0弄出来是条细线-->
            <tr height="50px">
                <th width="100px">姓名</th>
                <th width="100px">年龄</th>
                <th width="100px">职务</th>                
            </tr>
            
            <tr height="30px">
                <td>李白</td>
                <td>28</td>
                <td>教授</td>            
            </tr>
            
            <tr height="30px">
                <td>杜甫</td>
                <td>19</td>
                <td>副教授</td>            
            </tr>
        </table>
        <br />
        
       <!--快捷键 table>tr*4>td*3 然后按住tab键 一键生成4行3列的表格-->
       <h3>单元格的合并</h3>
         <table border="1px" cellspacing="0px">
             <tr height="35px">
                 <td width="100px"></td>
                 <td width="100px"></td>
                 <td width="100px"></td>
             </tr>
             <tr height="35px">
                 <!--先画出一个完整的表格
                     找到要合并的位置 合并列 colspan，然后将多余单元格删除 就是要合并2个,源码中只留一个td 2代表合并的个数
                     这是把第2行的第1列和第2列合并
                 -->
                 <td colspan="2"></td>
                 
                 <td></td>
             </tr>
             <tr height="35px">
                 <td></td>
                 <td ></td>
                 <!--同理行的合并也是一样 在指定位置写好代码,然后删除多余的。这里是把第3行和第4行的的最后一列合并-->
                 <td rowspan="2"></td>
             </tr>
             <tr height="35px">
                 <td></td>
                 <td></td>

             </tr>
         </table>
         
               
        
    </body>
</html>

【作业-简历】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>07 简历</title>
    </head>
    <body>
        <h3> 我的简历</h3>
        <br />           <!--style="border-bottom: none; 表示不要上表框 CSS的内容-->
        <table border="1px" cellspacing="0" style="border-bottom: none;">
            <tr height="27px">
                <td colspan="5">基本情况</td>
                    
            </tr>
            <tr height="27px">
                <td width="120px">姓名</td>
                <td width="120px"></td>
                <td width="120px">性别</td>
                <td width="120px"</td>
                <td width="120px" rowspan="7"></td>        
            </tr>
    
            <tr height="27px">
                <td>民族</td>
                <td></td>
                <td>出生年月</td>
                <td></td>
                
            </tr>
            <tr height="27px">
                <td>政治面貌</td>
                <td></td>
                <td>健康</td>
                <td></td>
                
            </tr>
            <tr height="27px">
                <td>籍贯</td>
                <td></td>
                <td>学历</td>
                <td></td>
            
            </tr>
            <tr height="27px">
                <td>电子信箱</td>
                <td></td>
                <td>联系电话</td>
                <td></td>                
            </tr>
            <tr height="27px">
                <td >专业</td>
                <td colspan="3"></td>        
            </tr>
            <tr height="27px">
                <td >毕业院校</td>            
                <td colspan="3"></td>            
            </tr>
            <tr height="27px">
                <td>求职意向</td>            
                <td colspan="4"></td>                
            </tr>
        </table>
        <table border="1px" cellspacing="0">
            <tr height="27px">
                <td colspan="4">教育情况</td>            
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">院校</td>
                <td width="151px">专业</td>
                <td width="151px">学历</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0" style="border-top: none;">
            <tr height="27px">
                <td colspan="4">工作经历</td>            
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">公司</td>
                <td width="151px">职位</td>
                <td width="151px">内容</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0" style="border-top: none;>
            <tr height="27px">
                <td >自我评价</td>            
            </tr>
            <tr height="54px">
                <td width="616px" colspan="2" ></td>        
            </tr>
        </table>
        
    </body>
</html>

 

posted @ 2019-05-17 00:44  ID长安忆  阅读(245)  评论(0)    收藏  举报