美文网首页软件测试精进之路
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学习第二天--创建表格

    今天事,今日了! ...

  • HTML表格

    你可以使用HTML创建表格。 实例 表格 这个例子演示如何在 HTML 文档中创建表格。 表格边框 本例演示各种类...

  • 表格

    创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下: 单元格内的...

  • 2019-01-14

    //动态创建表格---JS API视图 title * { ma...

  • HTML创建表格

    创建表格 想在网页上展示上述表格效果可以使用以下代码: 创建表格的四个元素: table、tbody、tr、th、...

  • 表格创建的方法

    创建表格,so easy啊,今天就创建表格这个小实例,来写写不一样的实现方法 html标签实现 js实现 js的方...

  • 动态创建表格(html)

  • HTML之创建表格

    要求:用HTML实现如下所示的表格 对于初学者而言当看到这个表格的时候会不会有点懵呢?表头又是行合并,又是列合并的...

  • 用HTML创建表格

    用HTML建表格 ...(标题)... ... .... ... .... .... a...

  • 表格神器bootstraptable

    使用 bootstraptable创建表格 一、初始化 1、HTML编写 引人css和js 定义表格,设置固定列宽...

网友评论

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

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