00:00
好,我们继续来上课,那么这节课呢,我们再来看一下我们这个HTML的表格标签啊,那咱们来看一下啊,我们要写表格,我们的,比如说我们在这里边新建一个这个word啊。我们来看一下word里边是不是也可以画表格啊,对不对,来比如说来个这个个人简历吧,啊,来个。个人简历,诶,好。那咱们来看啊,比如说在这里面我要想写一个个人简历,对吧,首先我得有一个中间的这么一个大标题,对吧,比如说在这里边叫做个人。简历啊好了,有了这个以后,接下来呢,接下来咱们这里面这个可以直接设置一个居中啊,但是这个居中哎,这样好了,然后呢,在这里面我可以干嘛呢?可以插入一个表格对吧,比如说这里面我们来一个表格。好,那这里边有什么呢?有这个姓名。姓名对吧,比如说来个这个孙建奎啊,然后性别男对吧,最后这个格呢,是不是照片啊,对吧,然后性别完事以后,接下来是什么,比如说这里边还有这个邮箱。
01:07
对吧,比如说这个AI的a.AA啊,然后电话。电话对吧,比如说这个呃13112341234好了,那最后这个位置,最后这个位置实际上是不是也是照片对吧?照片应该占位的,占位大概就是有可能这么大的一个格,或者是这么大的一个格,对不对,哎,就是占三个这个单元格,或者是四个单元格这么样的这个一个位置,对吧?所以这里边我们先一样先拿照片去做占位啊。来照片。我写个pic吧啊。啊,然后再往下还有什么,还有这个籍贯,比如说籍贯。对吧,比如说咱们给他来个来个这个这个。北京吧。北京啊,然后还有什么呢,还有他的这个爱好。
02:02
比如爱好女,然后来个pic对吧,他的爱好男。好,那再往下来呢,再下来有可能什么,有可能比如说是自我介绍对吧,然后工作经历。对吧,然后这里边这里边我也不知道写什么了,我就把这个删掉了。呃,三层单格。整号对吧,那现在我有这么一个表格对吧,那有表格那一样自我介绍这里的这四个单元格是不是要合并呢?是不是就留一行就行了,对不对,所以在这块我给他合并一下单元格。包括底下这里面我也给他合并。和名单哥。对吧,那自我介绍写下,比如说。家穷人丑。人丑。然后。薏米。
03:01
四九啊,小学文化。行了,就就这些吧。那埋汰人是吧,然后工作经历呢。那叫做走过南。闯过北。火车道上压过腿。然后没了对吧,然后照片这一块呢,是不是也要做一个合并呢,对吧,所以这里边我也给他合并一个单元格。诶,合并完以后,这里面就留一张照片就可以了,对吧,那现在咱们来看一个简版的这么一个个人简历是不是就出来了,那么出来以后这里这里面是在HTML里面,在这个word里面进行操作的,对吧?那么我们怎么样把它能移植到HTML里面的,也就是说我想在我的这个页面上也能写出这么一个表格啊,那怎么办呢?咱们在这里边来。看好了,我在这块新建一个。哎,这边文件应该叫做幺零对吧,哎,表格标签。
04:03
啊,那么在这里面我们要想写表格的话,必须先写什么,先写这个tableable标签啊,Table tle,然后呢,结束的tableable,那就这就证明什么,这就证明我们在编写一个表格了啊,那么编写表格现在就完事了吗?你看好了,我来刷新这个页面。我们能看到什么东西吗?是不是什么东西都没有啊,对不对?哎,在这个区间只是代表着你要开始去什么声明表格,那表表格里面有什么东西,表格里面有表头对吗?有这个呃,行对吗?有这个单元格没错吧?哎,所以在这里边我们就要去看啊,比如说我就想写这么一个表格。啊,就想写这么一个表格,那首先这个个人简历是不是就是我们表头啊,对不对,那么表头我们用什么标签呢?用这个cap标签啊,叫做。CPT结束的CP对吧,比如这里边一样个人简历啊,这个标签叫什么呢?叫做表头标签。
05:08
出现好好了,那现在我们再来刷新走你诶你看是不是有这么一个个人简历了,只是目前为止我们现在看到的这个它是什么样的,是不是纵排排列的,对吧?我们想到横排能不能呢?能啊,但是为什么默认是纵排呢?因为我的表格没有大小,然后表格没有大小啊,我们可以看一下在这里边啊,我们给它加一个什么呢?加一个边框BDF加一个边框属性包的等于一,那么这个时候我们再回过来来看周NY。诶,你看是不是直就在这下面有个下划线呢,为什么是这样呢?因为他这里边没有行也没有列。对吧,所以表格默认它就没有一个大小,没有大小的时候,那是不是我的这个文字,它是这么一单个文字是这么宽,所以它就变得这么宽了,明白吧,那怎么办呢?我可以在这里面给他设置一下,对吧,比如说我说WDTH宽度让你变成800,那现在我们再来看。
06:02
走你你看这回表格的这个宽度是不是有了,那这个内容是不是就居中了,看到了吧,而且它是什么,是不是就横向排列对吧,因为刚开始什么呀,刚开始他没有这么宽的宽度,它只按照你这一个字的宽度来衡量,所以你的每一个字都是什么都是。重排排列的啊,就是这个意思。好了,那现在完事以后,那么接下来说了,表格里边有什么东西,表格里边有行有列对吧?那我们就来数一下,这个表格中最多的行是多少行和最多的列是多少列啊,你不能数最少的明白吗?也不能说我任意数一个,你一定要数什么数最多的,那最多的列。你看好了。12345列对吧?行呢,也一样,一二三四五行,那这是不是就是一个五行五列的一个表格对吗?那么其中一行当中看好了这一行当中有多少个单元格呢?是不是性别就是一个单元格,孙建奎是一个单元格,性别是一个单元格,男是一个单元格,照片是一个单元格对吧?也就是一行中有五个单元格对吧?那么通过这个每一行中的第一个单元格是不是就组装成了一列,这是不是就一列?这每一每一行中的第二个单元格是不是又组装了一列?第三个单元格是不是也一样依然组装一列,是不是这么样一个结构对吧?所以在这个表格里边,我们有行跟列的概念对吧?那么也有行根单元格的概念,那么在HTML里边,我们的这个列是由多个单元格的垂直排列来组成的,对吧?所以我们在这里边要写的时候写的是什么?写的是每一个单元格,也就是说我这一行当中有几个单元格,有五个单元格对吧?
07:41
那行标签我们用什么呢?用TR标签。然后里边有五个单元格,每一个单元格就是一个TD,对吧,我们有五个,那这里边我就给写五个TD啊TD。乘以五。好了,五个TD,咱们来看是不是一行有五个TD,那现在我们再来刷新我们的页面,咱们来看总体,诶你看是不是有有内容了,对吧,有内容了,只是现在我们的干嘛呀,没把内容写进去,所以我们看不到对吧,而且他也没有高度啊,所以这里面我们来写一下,比如说第一个叫什么姓名。
08:13
然后叫做孙建奎。好了,第二个性别。难。然后最后一个照片。好了,现在咱们来看我的一行五列是不是搞定了。对吧,一行五列到六了,那还有第二行的话,那第二行只要是增加一个行,那是不是就多一个TR里边又是五列,是不是TD乘以五就可以了,对吧?然后这里面什么,这里面比如说油箱。AI的A。点AA。然后还有什么,还有电话。13312341234,然后最后最后的一个依然是照片。
09:00
照片对吧,那现在我们再来看我的第二行是不是也过来了。听懂了吧,那同样我的第三行第四行是不是依然如此啊,TR有一个TR里边几个TD啊,乘以五五个TD对吧?然后这里边第二行什么第二行是极贯。比如北京。然后这个爱好。难,然后还需要配合一个照片。那现在我们再来看。走你你看是不是又增加了一行对吧?哎,现在是多少,现在是不是就是三行,三行五列单元格啊对不对,哎,每一行每一行每一行,然后这里边有多个单元格组装的是不是就是一列对吧?哎,重排多个单元格就是一列,这是一列,这是一列,这是一列,这是一列对吧?其中在这一行当中,一行当中在每一个是不是一个单元格,这是不是一个单元格,单元格,单元格,还有这是一个单元格对不对?哎,好了,那还有两行,我们直接把它补全了,对吧?那。
10:02
这里面继续叫做TR,然后还是由TD乘以五五列对吧,第一个我们写成什么?写成叫做这个自我介绍,剩下的要写吗?不需要了,对吧,然后再来T2,然后里面还是TD乘以五,然后这里边我们要写的是什么呀?呃,工作经历好。你看这样的话,我的表格是不是就搞定了,哎,搞定了这只是第一步,那么接下来干嘛?接下来我们是不是叫合并单元格了,对吧?就好比像刚才我们看到了工作经历,是不是这四个单元格要做一个合并,那你看好了,这四个单元格合并是不是在这一行当中做跨列,这一列、两列,三列、四列,是不是在一行当中做跨列合并,哎,那么在一行当中做跨列合并,我需要干嘛呢?在这里面给他一个叫做Co SPS Co你要几列,我要四列,因为包含在自己嘛,这是第一列,第二列,第三列,第四列,对吧?所以剩下这三个我不需要我给他注释掉,但是大家记住啊,我们尽量给它注释掉,不要给它删掉啊,因为删掉的话,我是不是就会改变表格整体的结构了,因为表格本来就是一行五列的单元格,对不对,也就是一行由五个单元格来组成的,那么一旦我删除了三个,是不是这一个一行就变成了两个了,对不对,虽然你这块cos给了一个四进行了合并,但是这些现在我们也不要删啊。
11:23
好了,那现在我们再来看,是不是下面这几个已经被合并了,对吧,那合并以后在这个工作经历里边,我是不是就可以写内容了,比如说我现在什么内容啊,叫做。走过南。传过呗,对吧,好,那现在我们再回来看一下,诶没问题对吧,那还有什么自我介绍,那自我介绍是不是也一样,是不是也是在这一行当中做跨四列的合并,跟他是不是一样效果,所以在这里边我是不是也需要给他一个什么cos spn Co SP等于多少,等于四。对吧,那下面这几个我是不是就给它对应的注释掉了,哎,把它选中一下,然后给它注释好了。
12:02
那现在。再来刷新,你看那我的这个自我介绍这一行,是不是也做了一个跨类合并了,对吧,诶也更进行合并。然后那我们再来看,那这边还有什么呢?还有照片对吧,照片呢,你看照片这些也要合并单元格,但是它什么,它是不是在这个一列当中做跨行合并呢。对不对,哎,在这一列当中做跨行合并,那这个时候你看好了,我是不是就相当于将往上来啊这三个照片。最下还有个照片,是不是这三个组合并对吧,是不是跨了三行了,哎,所以在这里边我找到这个照片给他一个什么呢?Rose SP。给它设置为三,那同样底下这两个咱还要了吗?是不是就不要了,注释掉。然后再来一个给他注释掉好了,注释完以后,现在我们再来这边的照片是不是就搞定,是不是变成一个对吧,那是一个照片了,那现在我们学过什么,我们学过了这个图片标签了吧?哎,学过图片标签,那这里边咱们直接来一个imagine。
13:07
S对吧,宽度比如说小,呃,不对。W宽小一点,直接给个50对吧,然后src地址呢,当前目录以下边啊,下边我们再往里面放一张头像。比如说我们给谁就给他吧。把它关掉,然后。拿过来,这里边又多了一张啊,叫做a.GP这个叫做b.GPD。好了,那当前目录一面下边有个b.GPG。然后这个时候我们再来看。走你,诶,照片是不是就过来了,看到了吧?哎,同样自我介绍里的内容我们也写一下。对吧,操作。家穷人丑。一米。四九好,然后再来刷新,OK,那你看那这样的话,我的一个这个个人简历的表格是不是就搞定了对吧?哎,搞定以后呢,接下来我们在这个表格里边还能去做哪些属性呢。
14:14
首先我们先看table里面的属性啊,Table里边我们给他加了一个边框,对吧,如果不给边框,比如我们给个零啊,包子变成零,我们看什么效果走你。你看是不是就没有边框效果了。对不对,哎,当我给了一个一以后,是不是就就开始告诉们,告诉什么设置边框对不对,哎,那接下来呢,我可以什么呢?比如说我想设置这个边框的颜色啊,能不能设置呢?也可以,因为这块我已经设置边框了,所以我在这里边我可以给他borderder b b borderder color。颜色对吧,你要边框什么颜色呢?比如说我想要边框变成这个,呃,PP紫色对吧,那现在我们再来看走你。诶,就变成紫色了,看到了吧?哎,但是大家注意啊,当我变成紫色以后,我们其实看的会很清晰,你看每个单元格之间,每个单元格之间是不是有这么一点空白啊,看到了吗?这是不是有点空白啊,哎,我能不能把这个空白取消掉呢?可以啊,那么怎么取消呢?咱们先看这个空白是怎么加出来的啊,在这里边我们可以什么呢?
15:18
呃,一样,我在这儿啊,我们给它设置一个,设置一个什么呢,叫做sales space啊c space我给设置个十,我瞎给的啊。然后我们来看。刷新诶,你看这回这个空白是不是就大了。对不对,哎,那咱要说了,像想把空白取消,是不是直接设置为零就可以了。找你,你看空白是不是就没有了,这是不是就由什么由这么一条条实线的边框给我们勒成了这么一个单元格啊对不对,哎,那好了,那也就是说这个c space干嘛呢?是不是设置单元格之间的一个间距对不对,那么能设置单元格之间的间距,我也可以设置什么呢?设置这个内容与边框之间的间距,那么内容与边框之间的间距用什么呢?用C拍定。
16:04
用派四之为十,那这个时候我们再来看。走你你看我的内容与边框的距离是不是也有了,对吧?哎,这个内容与这边边框是不是也有了,至于后面的,因为我这个内容啊,并不会占满整个单元格对吧?所以后面它意味着是空的对不对?哎,但是它这个顶上左边还有底部是不是各为十像柱的这么一个单元格啊。哎,那OK,那接下来我还可以干嘛呢?我还可以设置整个表格的背景颜色,那么在这里边我可以通过什么BG color来设置,比如说设置一个粉色的啊,那现在我们来看刷新我整个表格是不是背景都变成粉色了?对不对,哎,包括我能不能让表格居中呢?也可以在这里面给他一个Le等于一个center,那等于center的时候,那你看这个时候表格是不是在我当前浏览器中是居居中的,对不对?哎,能给他居中,那就能给他居右。
17:01
Red。是不是居右了对吧,那默认值应该怎么,是不是应该lab的居左呀。你看这么居住对吧?哎,那这里面我们给它换一下啊,叫做三转向的居中就可以了啊来。刷新。好吧,那就居中了对吧?哎,那居中完以后一样我还可以干嘛呢?我还可以给表格设置背景图片啊,也就是说找一张背景图片,当我表格的这种背景样式,那在这里边我可以通过什么BG啊,不是BG了,是background BB background等于什么呢?一样等于当前目录以面积下边面积下边的a.GBG。好了,那这个时候我们来看。走你诶,你看是不是拿背景图片来填充了,对吧,当然背景图片它不足这一个图片的宽度是不满足我整个表格的这个宽度的,对吧,所以它的图片是不是开始进行重复了,水平方向重复了。对不对,哎,那OK,这就是可以干嘛设置它的这个背景图像啊好了,那这些呢,就是我们这个表格中常用的这些属性,那当然我们用了宽度还少一个什么,还少一个高度,高度我也可以用,比如说我给它加一个高度多少呢,400。
18:14
那现在你来看我表格的高度来刷新,是不是也在增高,看到了吧?哎,增高以后我的内容啊,在这里面是不是就进行了这个垂直居中了,你看啊,每一个内容在这里面是不是都是垂直居中的,对不对?哎,咱们把这个图片先卸掉吧,啊图片先卸掉,卸掉图片以后呢。你知道能用的加图片就行了啊。好了,还是用这个颜色啊,用颜色我们看得更清楚一些,对吧?你看每一段文字在表格的这个垂直部分都是默认都是什么都是垂直居中的啊,这就是表格中我们常用的,就是在table标签中我们常用的属性啊,那么table标签完成以后,接下来什么是不是就TR在这个行啊,行那边我们设置什么属性呢?一样,比如说我们随便找一行啊,比如就是按这一行来了,那么第一行我们可以干嘛呢?可以可以设置BG color怎么样,这一行的背景颜色对吧?我把这一行是什么设置RQ。
19:07
变成什么蓝色对吧?走底你看第一行是不是变成蓝色了对吧,那默认这个图片是不是也是第一行的内容啊,哎,那好了,那设置完第一行以后呢,接下来我想要什么呢?比如说我想要这里边的内容啊,都变成什么,变成水平居中,它现在只是垂直居中了,对不对,我想变成水直平居中行不行呢?也可以,那在这里边我就加一个什么A等于。等于什么呀,等于center居中。深提亚,真的好了,那现在我们再来看刷新,诶,你看我的内容整个第一行是不是水平垂直都居中了,对吧?哎,那OK,那这是我们行的进行设置,那么能设置这个,我能不能设置这个,比如说我要第二行啊,我要第二行所有的内容,刚才我们设置水平了,能不能设置垂直呢?它默认垂直是居中对不对?那现在咱们来看啊,我再来第二行,第二行里边我给他一个ari接,等于一个center,第二行水平我也让它居中。
20:05
看到了,比如说水平居中以后,垂直为什么居底,比如在底部显示啊,那怎么办?这里边我可以给加一个V列,等于什么呢?等于button BOT Tom button啊,这是什么呀?表示垂直居底啊,那这个时候我们再来看啊。周。你看我整个第二行这个垂直距离了,对吧,哎,我聚离以后能不能举顶呢,也可以,那就变成什么,变成top。来是不是居顶了对吧,那有人说为什么居顶以后,你这顶上刚才居离也是对吧,你距离顶部有这么一段距离,这个你刚才距离的时候,这个文字距离底部也是有一段距离的,对不对,为什么你看好了,在我表格这块设置里边,我是不是加了一个叫做什么呀?C pading为十像素,如果我让它变成零,那这个时候你看是不是满满的贴到上面了。看到了吧,哎,这是刚才我给这十像数的问题啊,好了,那我给它还原回来啊,那一样,那居中的垂直居中的属性我们就得用一个。
21:05
这里边啊,就不是center了啊,不是center,而是M啊,Middle在这里边是垂直居中来,是不是垂直居中了?哎,那当然有的人会误认,为什么我用center也能垂直居中啊,那你看在这里边刷新有没有垂直居中,也有吧,对不对,但是你就别说你用center了,我用一个大熊,你看看它能不能垂直居中。能不能,是不是也能,为什么?因为它默认就是垂直居中的,对不对,所以就算你给他一个它不识别的单词,它是不是也是垂直居中的效果,对不对,顶多是什么这个不识别,这个不识别我就不解析了呗,那就走我默认的,走我默认的,我不就垂直居中吧。对不对?哎,所以大家记住啊,并不是在这里面生成垂直居中的啊,而垂直垂直居中的真正单词叫mid middle啊,在表格里面我们使用middle进行垂直居中啊,好了,这就是什么我们TR里边常用的属性啊,那么单这个行中属性我们用完了再来看什么呢?我们再来看单元格里边我们会用到的属性有哪些啊,那么单元格里边,比如在这里边。
22:08
我们随便找一个啊,比如说就找自我介绍吧,啊,就自我介绍这个单元格对吧,同样这里边我也可以给什么给LL等于什么,等于一个center,那这个时候你来看自我介绍是不是相对于这里面是水平居中的。对吧,哎,这只是控制了一个单元格,我能量居中,我也可以,干嘛让它垂直方向,比如说来个V等于什么,等于一个top来。走你你看是不是也居上了,对不对,哎,那同样,那在这里边我可不可以给它设置背景颜色呢?这里边叫做这个BG color对吧,变成什么呢?变成一个yellow吧,变成黄色。走米,你看这个背景颜色是不是变黄了对不对,哎,同样这里面还能干嘛,还能设置Co SPA和Rose SPA嘛,对不对,那能不能设置宽高呢?这里边我们来测试一下来WDTH宽度,比如说我现在变成200。
23:00
走,你变没变,变了吧,哎,高度再来一个he he,我也让它变成200。走,你是不是也变高了,看到了吗?哎,我能给注意啊,我是给这一个单元格设置,那由于这一个单元格的宽高在增大,那它的这个高度是不是也要会随着它的增大,因为他们两个始终是一边高才可以的,对不对?哎,那这里边我能宽高,那行里边我能不能用啊,那在这个行里边,比如说我也一样width,诶错了,Width宽度,比如说我给了多少,给他200。来啊,不行啊,宽度变成300吧,来。走,你。有变化。行里边我刚才给的是谁呀?给的是极贯这一行,看到了吗?极贯这行宽度变成300有吗?没有对吧?哎,宽度不会变化,那高度呢,来1I。接D高度,比如说高度给它变成多少,变成300也变成300啊,那这个时候来刷新。高度好不好使,高度是不是好使对吧,但是宽度呢,宽度是不是在这里就不能用了,哎,因为行的宽度,行的大小一般都跟随着,跟随着谁呀,跟随着它的负类对吧?也就是table table的宽度我们设置800了,那它的这个宽度也就是800啊,这个是咱们常用的这几个属性啊,好了,那这几个属性用完,我们这里面还有一些标签,我们并没有用上啊,那么哪些标签呢?咱们来看啊,我这是做了这么样的一个表格,对吧?那么接下来我们再换另外一种表格,比如说嗯。
24:28
我们来访问一个啊,Logo host下边的on。Line下边零一下边LESSON01下边PPS,诶,我们就访问这个。好了,进到这里面来,以后我们要进他的后台。PHP。OK,登录一下。 pap3SPPS,然后8VZG。然后我们点击登录。
25:02
登录完以后啊,这里边我们来看一下这里边有没有啊用户这里边比如会员管理,诶这里面其实也有表格,看到了吗。一律不啊,但是这个表格并没有什么,并没有线对不对。而且这个表格跟我想要做的呢,还。我说它一样啊,但是呢,有一个效果是一样的,就是你看我主标放上来是不是可以让这个背景颜色变换了,对不对,哎,那好,那我们看一下我们自己的表格吧,来,那这里边我应该也有啊,Project pro project,我看这里面有没有啊。然后再往后project下边的。来电。啊,比如说用户管理,那你看这里边是不是也有表格对吧?而且这个表格大家们来看啊,它的这个头部啊,看到他的头部了吗?它的头部是什么,是不是加粗,而且还是居中的对吧?其他的没有居中,但只是在这一块是加粗居中的吗?哎,所以在这里边我们也想做一个这样的一个表格,那怎么办?
26:05
来咱们来看啊,我给大家也做这么样一个表格,那在这块新建一个呃,H文件,叫做幺幺用户。表格啊,那咱们要做表格,咱说了必须先写成tableable对吧,Tablele错了,Tale好了,然后给他一个边框,Border等于啊,然后WDTH宽度,比如说一二,我给它800ARI。J等于一个生产人数直接居中了啊,居中以后呢,在这里边有行对吧,那你看第一行里边放的都是什么,是不是都是我这个列的单元头对吧?这个列的猎头啊,编号啊,用户名啊,真实姓名,头像权限是不是这些东西,哎,所以在表格中我们还有一个什么呢?叫表头单元格了,表头单元格有没有什么标签呢?我们用这个TH标签啊,TH标签它也代表一个T的标,也代表着一个表头单元格,注意是一个表头单元格啊,所以在这里边我们给他一个比如说编号。
27:02
编号对吧,然后呢,再来。TH。结束了TH对吧,比如说用户名啊,然后再来一个TH,比如再来一个性别吧,啊啊,我们就给这三个啊,那现在我们来看我一行三列是不是就有了啊。呃,来访问一下,来你看编号用户名性别对吧,我这里面加了什么,是不是表头单元格,表头单元格这里面是不是自动居中,而且还加粗啊。对不对,然后同样我在这里面也可以继续给他什么呀,给他CP。Captain结束的CDK叫什么呢?叫做用户列表,好了,那现在我们来看刷新,你看用户列表是不是有了,当然这个字比较小,跟他不太匹配,我能不能让它变大点呢?也可以啊,你可以直接在这里边,比如说我在这里面套一个标签不就行了嘛,对不对,套一个什么标签,比如说我套一个呃,HR一个标题标签结束的HR,那这个时候。你看字是不是变大了,哎。
28:01
好了,那接下来是不是就是里边的每一行的内容了,那每一行的内容我继续用到什么?用TRTR里面继续TDTD乘以几乘以三对吧,那第一个编号为一吧,用户名,比如说来一个这个呃,大熊。啊,性别。来对吧,然后再来TR。PD2。PD乘以三,然后二,然后这里边再来一个这个孙建奎。然后性别女,然后再来一个TR,再来TD乘以三啊来个三这块来个高峰。然后性别幺。腰啊,好了,那这个时候我们来看。周泥,诶,你看我这个一行三列的内容是不是也都有了,对不对,哎,好了,那现在有了以后一样啊,我也可以让这里面的内容居中吧,那比如说这里面的内容要居中的话,我是不是在每一个TR里边给他设置一个什么,呃,Li Lin等于一个c center对吧?那每一个里边我都要给吧。
29:10
第二个还有第三个对吧,那现在我们再来刷新,你看是不是有了,哎,那你想想,如果一旦数据多的时候,我是不是有可能还加个分页啊,对不对,那加个分页,比如说这里边同样啊,我们再给他一个TR,然后里边TD,我直接给它合并了cos PN为三。对吧,我这里面是不是就三列,哎,三个单元格嘛,我直接给合并了,合并以后这里边我给个A,我们先占位啊来刷新,你看是不是有内容了,哎,有内容咱说到分页的话,那我们这里边是不是就要给他几个A标签,比如这是首页。首页CTRLCCTRLVVV。然后最后一个是尾页,那这个就是上一页。然后这个就是下一页对吧,那好了,那现在咱们来看。刷新,诶我分页的东西是不是就有了,有了以后,但是这个内容我是不是得干嘛呀,得放到右边来呀,所以在这个TR里边,我是不是就可以给他一个Lin等于什么,等于right让它靠右对吧,那这个时候再来刷新,你看是不是上到右边来了。
30:14
对不对,哎,好了,那这块这个表格我们是不是就做完了,做完以后这个表格还有一点点小小的瑕疵,什么瑕疵呢?就是后期咱们来看啊,我们会做的一个效果,什么效果呢?就是你看鼠标放到哪一行上,哪一行的背景颜色是不是就会变换呢?对不对,那这个就需要我们用到T这个GS了,GS用到这个CSS了,比如在这里边啊style标签我先给大家写一个,比如说找到TR标签,你看TR是不是就是行啊对不对,找到这一行行里面干嘛呢?冒号号啊,当鼠标悬停时,我让它的背景颜色。变成粉色,好,那现在我们来看我们的是不是也可以了啊,返回到这里面来刷新一下来鼠标悬停背景颜色变换变换变换,看到了吧,是不是也变换了,但是这里边有个问题,你看好了,如果移到表头里面变不变换,变换了吧,如果移到这个结尾的时候,是不是也变换对吧?而人家这里边看好了头变换吗?不变换对吧,只有这两个变换,底下呢,底下也没事。
31:13
对不对,只有中间这两个变化,那这样的话我们是不是就不好控制这个表格了,对不对?所以我们也可以给这个表格再进行划分,划分成呢?比如表格,这是不是就是表头部分,哎,这就是表格的头部,中间这三行是不是就是我主体内容部分对不对?最底下这一行是不是就是我的底部啊?哎,所以我可以给表格这里边也拆分成头中尾啊,那头部是不是这块内容,那这块内容我可以用一个标签给它包含的叫做T。还的。那在这块就是结束的T的,然后里边的TR我往里面进行再缩进一次,你看这个时候我是不是用了一个标签给它包含了,也就证明声明了什么,他这块内容这一行是我的头对吧?表格中的头对吧?那再往下呢,还有什么呢?还有主体内容,那就是我的body了,对吧?那就t body。
32:02
好,那主体内容是不是有三行啊,那这里边这三行我给他往里面缩进一下,缩进完以后呢,在这个位置再来回车结束的t body,诶,你看好了,我现在t body所包含的是不是就是我表格的这三行内容看到了,哎,然后最后而底部呢,那是不是就是什么结尾了t foot。然后就会这一行再往里面缩进一下,然后再来一个结束的t foot好了,现在我的表格是不是分成头中尾三部分了,头中尾三部分,但是刷新你看我再选还是依然没有改变这个效果,对不对?但是这个时候我们有一个条件,什么条件了,是不是就是我只是鼠标移动到什么,移动到这个主体内容的时候,我才能变换颜色对吧?所以主体内容谁主体内容是不是t body,是不是当我鼠标移动到t body里面的TR,我才能让这行变换颜色对吧?所以在这块我想给的什么呢?应该是T里边的TR啊,这个东西我没讲呢啊,你不需要去记,我只是做演示啊。
33:07
不需要记啊,只是做演示啊,后期CSS会详细讲解好了,那现在你再来看啊,我再来刷新,刷新完以后我鼠标放到底部,你看放到底部还变吗?不变了吧,再来我放到顶部,顶部变吗?是不是也不变,但是我放到中间内容这里边,你看放到每一行中是不是都会变换颜色。看到了吗?那这个效果是不是就出来了?哎,这就是我们表格中需要大家去了解的这些内容啊,那么一般表格我们用在哪儿呢?用在网站的后台去处理这些数据会比较多,比如说你看在这里边。像用户管理,我们是不是做了广告列表,我们做了吗?我看看啊广告添加。呃,这里边。链接的,你看我是不是也做了。看到了吧,哎,所以表格一般用在哪比较多呢?就是用到后台去统计数据的地方会比较多啊,这是咱们表格中需要大家去了解的,好了,那我们看一下我们的笔记啊,那么表格咱们有这么多标签对吧?Table标签是干嘛呀?是定义表格吧?哎,定义表格cap呢,是定义表格的标题对吧?TR呢,定义表格中的行,TH呢,定义表格的表头。
34:23
单元格对吧,这个呢是定义单元格对吧,然后T呢是定义什么表格的头部啊,这是定义。表格的主体。最后是定义表格的底部,诶,这是我们说表格中所需要的标签了。对吧?然后再往下来,你看这个table标签中常用的属性有什么?宽度高度居中对吧?啊就是水平摆放位置,然后呢,背景颜色,背景图片背景颜色边框和边框颜色,还有什么单元格之间的间距,以及单元格内容与单元格边这个边框之间的大小啊这里边对于设置表格边框颜色的时候,它的这个要有要求什么样?就是你必须先设置边框,也是标准标准大一对吧,你才能干嘛才能去设置这个颜色啊,才能设置这个颜色,然后另外还有什么呢?还有这个类的曲子是什么left center和right分别是居左,居中和居右,但是在tableable里面放的是干嘛呀,是相对于是表格,相对于浏览器中的摆放位置啊,然后这样后呢,GRR是行标签,常用的属性有什么呢?有。
35:33
这个高度对吧,横高,然后alone v以及BG color是不是这些,哎,然后再往下来还有什么,嗯。这个。TD啊,用的属性一样,有什么宽高对吧,还有V,还有BG color以及Co SP和Rose SP Co SP是设什么单元格跨列合并对吧?而这个Rose SP呢,是单元格进行什么跨行合并。对吧,也就是说这是在。
36:03
一行中跨列。对吧,这个呢,是在一列中跨行的吧。在一列。中跨行合并啊。这就是表格中需要用到的内容啊,当然表格中的内容比较多,所以大家下来以后一定要把它多多练习才可以啊,一定要多练习啊,好,那这节课我们到这里。
我来说两句