美文网首页软件测试精进之路
html学习第二天--创建表格

html学习第二天--创建表格

作者: 胆小的米老鼠 | 来源:发表于2018-08-24 10:21 被阅读17次

       今天事,今日了!
                                                       致 所有人

    HI,大家好!今天给大家说一下html中创建表格的基础操作,文章内容全是笔记性质,不全之处请多多指教!
    好吧,今天不按大路出牌,先上效果图,晃一双眼:


    ps:文中资源纯属从网上获取,如有侵权行为,请联系作者,火速删除,并致歉!

    是不是感觉很熟悉的感觉,这就是我们简历模板中的表头信息,在html中一个表格就搞定,是不是很easy!
    我知道大家已经等不及要看如何创建的这个模板,别急,请我慢慢道来,菜来了....

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>创建表格</title>
    </head>
    <body>
        <h3 align="center">创建个人简历模板</h3>
        <!--创建一个简历模板的信息头表格-->
        <table width="500" height="300" border="1" cellpadding="0" cellspacing="0" align="center">
        <!--设置表格的高和宽,边框,居中显示-->
            <tr>
          <!--colspan 设置合并单元格,数字代表合并多少列,而在数字范围之内的其他行的对应td字段标签要同步删除-->
                <td colspan="5" align="center">基础信息</td>
                
            </tr>
            <tr>
            <!--设置每个字段占用总长的比例,并居中显示-->
                <td width="18%" align="center">姓名</td>
                <td width="18%"></td>
                <td width="18%" align="center">性别</td>
                <td width="18%"></td>
                <!--插入图片-->
                <td rowspan='5' width="28%"><img src="/home/python/Pictures/1535074898(1).jpg"></td>
       <!--rowspan 设置合并单元格,数字代表合并多少行,而在数字范围之内的其他列的td字段标签要同步删除-->
            </tr>
            <tr>
                <td align="center">年龄 </td>
                <td></td>
                <td align="center">地址</td>
                <td></td>
            
            </tr>
            <tr>
                <td align="center">手机号</td>
                <td></td>
                <td align="center">邮箱</td>
                <td></td>
                
            </tr>
            <tr>
                <td align="center">毕业学校</td>
                <td></td>
                <td align="center">专业</td>
                <td></td>
            
            </tr>
            <tr>
                <td align="center">特长</td>
                <td></td>
                <td align="center">工作年限</td>
                <td></td>
            
            </tr>
    
        </table>
        
    </body>
    </html>
    

    到这里一个简单的表格就创建完成了,只是利用了html的知识,并没有利用css样式,会在后续学习完善。

    创建表格一行一行,一列一列的写肯定特麻烦,好在sumlines给我们想的很周到,用快捷键来创建表格!

    实际演示一下:
    创建一个6行5列的表格:
    table>(tr>td*5)×6 ,然后很骚气的按一下tab键,见证奇迹:

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    

    如果我们需要一次编辑多个内容,也是可以的,

    按住ctrl,用鼠标选择多行即可,

    <table>
        <tr>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
        </tr>
        <tr>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
            <td>是不是很快</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    

    今天的笔记就先写到这里吧,做笔记是一个好习惯,不但能让自己复习,也能为日后复习好查找!

    如果你今天没有写学习笔记,请在明天太阳升起之前动手写一写吧,你们会感觉到的他 的魔力有多大!

    相关文章

      网友评论

        本文标题:html学习第二天--创建表格

        本文链接:https://www.haomeiwen.com/subject/topmiftx.html