00:00
来,接着来看我屏幕啊,我们刚刚说了HTML当中的一些基础的一些标签。那其实大家平时啊,我们在一个网页上,我们除了有这些文字啊,图片啊,超链接啊,无序列表啊等等。我们还会有一个一个的表格。啊,其实我们还能看到一个一个的表格。比如说。比如说。我们看一下新浪啊,新浪的网页。你看一下,其实这个网页当中充斥着大量的表格。你比如说这一部分。呃,这一部分是吧,同学们,它其实就是一个表格。啊,我们这个页面的布局上,你看很多地方其实它都是一个表格,只是它的边框没有把它显示出来。如果把边框全部都画出来的话,那可能就比较难看了。所以呢,我们的表格其实在网页里面是非常常用的。
01:01
那下面呢,咱们就一起来看一下啊,这个表格咱们怎么来写。咱们现在应该是第17个。表格。表格我们用的是叫table,用table这个标签来表示表格,好,这个把它删掉啊。这是我们刚才写的。好,我们把title把它改掉。这个title我就改成叫表格标签。的学习。所以呢,我在这边写个叫table。Table,它就表示的是一个表格。然后呢,这一个表格里面会有很多的行。行,我们使用的是。T2。啊行,用的是T来进行表示,所以我就可以在这边写个T2。这表示的是一行。那这一个T2这一行里面,我们又会有很多的列。列,我们使用的是TD。
02:01
所以呢,我可以在这边写很多的TD。TB。比如说我们写一下,比如说姓名。比如说这个叫门叫门派是吧。门派,比如说还有这个叫。叫成名绝技是吧,这个叫。成名绝技。然后比如说还有一个叫。叫内功值是吧,这个叫功利值。啊,内功。意思一下啊,就这样子,那这样我就写了一行,这一行里面是不是有四列啊。好,这是一行,我们还可以再接着写T2。第二行是不是这是第二行,然后我们这边再写TD。好C拷贝一下啊。然后呢,比如说第一个。比如说这个叫乔峰,是乔峰应该属于丐帮是吧。
03:00
然后他应该是降龙十八掌是吧。啊,不是降龙十八掌吗?还还这个是叫。少林长拳吧,意思一下啊。功率值,比如说5000就这样子。好,CTRLC。那比如说还有续组是吧。续组应该是属于那个叫什么。灵鹫宫是吧,好,零鹫宫。灵鹫宫,他他应该是叫北冥神功是吧。北冥神功。好,他这个功率值一万五是吧,三个人的功率值好。比如说还有这个叫这个叫叫扫地声是吧。扫地僧应该是少林是吧,少林寺的。扫地僧这个他的成名绝技是啥呢?应该是72项绝技吧,是吧?七杀绝技。
04:00
然后这个功率值,这个叫未知是吧。不知道它的功率值是多少,就这样子。那行吧,现在同学们我就写了一个表格。啊,这样就表示我写这个表格。那这个表格里面是不是我应该有四行啊,一行,两行,三行,四行,每一行是不是都有四列啊,就这样子。我们可以打开浏览器去看啊。稍等一下啊。打开。诶,这样我们就能看到这个表格了。那当然这个表格它没有边框嘛。我们可以把它的边框调出来。如果大家想查看这个效果,大家不想通过浏览器,想比较快捷的方式,CTRL加B。Abcd的B啊。CTRL加B就能浏览。再CTRL加B,它就能到编辑阶段。然后呢,这个table呢,我可以在这边写一个叫波。一。
05:01
边框,那这样的话,我们再来刷新一下,哎,它就有边框了。就这样吧。我可以让这个表格呢,让它的宽度,咱们可以把它写一下。WHY?好,它的宽度,比如说我让他是400像素。那这是我们刷新一下。哎,这个呢,就变得大一点,600吧,400有点小是吧,600差不多。好,一定要CTRL加S保存啊。刷新一下,大家看一下啊,如果我代码有改动,假设我代码也改动,你看下面这个是不是红色的。能看到吗?你按一下CTRL加S,变成变成这个蓝颜色的啊,就表示保存好了。好,这是宽度波的,表示的是边框。再来。我们这个表格啊,这个表格当中啊,单元格和单元格之间是有一些间隙的。应该没问题吧,单元格和单元格之间是有一些间隙。我们怎么把这个间隙把它去掉呢?
06:02
我们这边写个叫Co。Spicy。我们把它写成一个零。这样就表示C表示单元格,单元格和单元格之间的spicy叫空间,就是零。我刷新一下。这样它的线就两根线啊,就把它里面就没有这个就是零像素了啊。就这样子。当然这个线比较粗。因为是两项素。还有你这个成名绝技啊,少林长拳啊,什么北冥神功啊,紧贴着左边,紧贴着上面,紧贴着下面,这给人感觉太压抑了。我们可以设置一下seal pending。PA顶PA定叫填充。啊,我的记,我反正我记得就是钉子嘛,钉子往里面挤嘛,叫填充叫判定,那另外一个就是间距。叫叫单元格间距。这个比如说写个四四像素。再来看一下刷新。
07:01
你看一下是不是它左边和上面就有一些距离了,哎,就这样子。啊,这样给人的感觉没有那么压抑嘛。当然了。我们所写的这四个属性,其实全都淘汰了。啊,这是我们早期HTP里面所出现的一些属性。这个先不着急,咱们先了解这四个淘汰了。只要是HTM当中啊,HT当中,只要是显示的效果相关的,基本上都淘汰了。因为我们全部使用样式表来进行替代。我们刚刚画的一个图,HTL决定页面上显示什么内容,CSS决定页面的美观程度是吧,同学们。啊,所以说这些只要和美观有关系的这些属性啊,其实HTM已经用的越来越少了啊,基本上都已经淘汰了,我们全部把它替换成使用CSS来进行修饰。好,但是这个了解了没坏事啊。
08:02
那这样的话,这个表格我就把它写出来了。啊,这就是我们的一个表格,然后呢,这个第一行啊。第一行。是表头,你最好和下面的长得不太一样。所以这个TR里面这个TD呢,我就把它换成TH。Head tablehe叫表头。啊,把它换成H。就这样的。那么它是什么效果呢?我们刷新一下。你会发现表头加粗而且居中是吧?但老师下面不居中好难受啊,你把下面也改成居中,咱们再讲一个淘汰的表现,叫align。Line叫对齐方式。对齐方是center中心,中心的意思吗?那就居中嘛。好,咱把它写一下。这样就可以了啊。我们再来刷新一下,你看他这就居中了呀,就这样子,老师,我想把这个表格居中,怎么办呢?也有办法啊,咱们先先先先不说啊。
09:05
也是有办法能够把它做到居中的。那这是我们所讲的表格,表格我们使用table行,用TR列,用TD,那然后呢,这个列呢,如果是表头列。表头的这个列我们用的是TH是吧?同学们啊,用的是TH。另外呢,我们在表格上面有一些属性。Table中有如下属性。虽然已经淘汰。啊,但是最好还是了解一下啊,但是啊,最好了解一下。哪些属性呢,第一个。比如说我们有。宽度嘛。表格的宽度嘛。第二个我们有SESPY。这个指的是单元格间距。See your pending。Cell单元格填充。
10:03
啊,这个叫单元格填充。叫。然后呢,我们T2上面我们写的这个叫叫santa。啊,这边还有个波的,我们把它也把它写一下啊,波的其实也淘汰了。好的。表格。表格。边框的粗细。啊,一像素的出席。好,然后呢,咱们就写到这吧,呃,TR中,TR中有一个属性啊,这个属性其实也已经淘汰了,叫。咱们设置的是设置的是叫S是吧,除了cent之外,咱们还有left,咱们还有right等等等等,好就这样子。啊,默认是。默认是left对吧,剧组对齐。好,这是table。那表格的这个啊,基础的基础的这个我就把它把它写完了,这是一个表格,下面呢,咱们再来写一个表格。
11:01
好,我先来给大家画个图。这图好像被我关掉了,是。关掉之后我们到这了。我想在一个网页里面,我想画一个表格出来,这个表格大概长成这个样子。首先我们这边有一个叫啊,首先我们这边有个叫名称。单价。干将。数量。小鸡。操作。然后比如说我写个苹果五块,数量20小几100斤,操作操作,比如是个小图标叫删除。啊,它是个小图标。这个小图标,嗯。稍等一下啊,我先把它下面先复制一下啊。苹果。菠萝。这个叫,这个叫香蕉。
12:01
好意思一下啊,就这样,那这个操作操作是一个像长得像垃圾桶的一个小图标。把它画掉了。差不多意思一下吧,这个。实在画的不行啊。对吧,这是个垃圾桶,就这样吧。能看不出来吧,大家这个想象能力也太差了吧。这么很显然这是个垃圾桶嘛,是吧,好。那咱们要把这个表格把它做出来。好,我们来试一下。这个table放在这边不变了啊,要不我们再赠送一个标签叫HR。A小叫直线。那就会在下面显示一个直线。好吧,咱们把它分割下来啊。所以在HR下面,我们再来写一个table。然后呢,在这个table里面呢,那和刚才一样的,等于一。Spicy等于零。SESPY拼错了啊。See your。
13:00
比如说咱们写个四项素。那么在这个里面呢。第二、第一行。第一行我们写个T啊,TD啊,叫TTH吧TH。好,这个叫名称。Can you see。好名称。单价。数量。小季。操作。好,就这样子。这是一行,再来第二行。TD。Can you see。那第一个比如说苹果。五块20斤。100,然后有个叫删除,好把后面的删掉。OK。拷贝。咱们就写三行。苹果。
14:01
菠萝。下面香蕉。菠萝三块。15下下瞎写一下啊,45。45。这个叫西瓜。六。五一写六吧,那就36吧,好,差不多就这样吧。那咱们看一下这个表格。我们运行一下,哎,这是个表格吧,我们可以把它的wide。把它加进去。600可以吧,同学们。刷一下,哎,这样这个表格就出来了,下面的下面这个文字呢,咱们也把它居中。那我们就得写个。Can you see can you,喂。针灸费好,就这样。哎,这样是没有问题的啊,它也是能够居中的。好了。
15:01
这个删除的小图标,我先把它先换掉。删除小图标PNG。差不多吧。借机用这个吧,图片另存为。我把它保存一下。我们这是。是W,这是不对啊,稍等一下。图片另存为。JPG格式啊,没问题。我们把它放到我们的目录。然后呢,我找到今天这个找到。我应该是写在代码里面的,写在image里面是吧?行,我就放在这叫delete,点击BG行吗?同学们。这是JPG,不是PNG啊,好。
16:01
不管他了,咱们就引用这个JBG就可以了。然后呢,我们把这个图片把它引入进来。删除吧。那你这边要写一个叫image吗?然后得有个SC属性嘛。这个S3属性我得写images杠,delete.jpg是吧?同学们我得把它改过来。好,我们运行一下,哎,这图片这个一定大是吧,把图片改一下wide。Y的等于24。高度24差不多,我试试啊刷一下。哎,这个估计差不多还稍微有点样子是吧,那行吧。依次类推。下面的我也这么改感据C。根据。You。哎,这样就可以了。这是删除这么一个小图片。下面我要做的事情是什么呢?我把这个地方的看好了啊。
17:01
我把我看一下啊,苹果菠萝西瓜。我把这个价格这是五块。这个菠萝价格也是五块。我们看一下两个都是五块,我的想法是这两个格子就合并成一个格子,在中间显示一个五算了。表示这两个人都是五块钱。所以这个TD看好了啊,我现在选中的是52行的这个TD。我把它删掉。我删掉了。删掉显然就不对了嘛,运行一下你看15是不是就本来是右边的就跑左边去了,它少了一个格子了。我的想法是这个地方的格格子被我删掉了,那请你让上面那个格子画两行嘛。占据两行嘛,能听懂吗?这样的话,你这个15就不会挪到左边去了。所以这个上一行这个苹果里面这个单价,我要写个叫roll SP。
18:00
入表示行。这个叫行合并,我写个二,表示跨两行合并。再运行一下,你看它就变成这样了。好,再来,我在下面补一个总计。总计,然后多少钱?一百一百七,181,总共181块钱,我们把它显示在这总计,然后一个格子显示。好,我们来看一下。所以呢,我就回到这儿。T2。T。然后呢,我这边写个TD。TD。好,我这边写个叫总计。好,下面我再写一个TD 181TD。那我们运行一下,哎,181在这这个没有居中是吧,咱们写一下吧,拉,等于三把一行里面所有的格子全部居中。好,刷新一下。但是你这个181,你只写了两个TD吧,同学们。
19:01
后面这三个没有,我们最好让这个梯能够占据四个格子的空间。这个这个格子是不是表示跨了四个列。行。跨四列也就这个格子。表示列column span等于四。我们再来运行一下。你看他就跨撕裂了。没问题吧,这是我们的表格。我把它写在了。我们介绍了两个属性,一个叫Rose。它指的是行合并。卡姆SP指的是列合并。这样吧。啊,SPA行合并,SPA指的是列合并。没问题啊。这是我们所说的表格。
我来说两句