81.尚硅谷_HTML&CSS基础_表格的样式.avi原创

刚才呢，简单的讲了这么一个表格的一个基本的一个用法，其实主要说什么三个标签，Table tr，还有这个TD，接下来呢，我们来尝试着创建这么一个表格啊，简单来说一下，首先呢，我们这来写一个，那表格呢，我们先写一个表头，我们需要这么几项，第一个是我们这可能需要一个学号，诶然后可能有一个什么呀，姓名啊，可能需要一个这个性别，诶再来一个这什么，再来一个这个住址啊，我需要创建这么一个表格，那这一部分我们叫什么呀？是不是叫表格这个表头啊，哎，表头，那接下来我们再来写啊，可以截绍信息，我们的第一号一号来一谁呢？来一个这个孙悟空性别来一个这个男，住址是花火山，花火山啊，不用写那么详细了是吧，我详细了啊，诶，那也就说我要创建这么一个表格吧，然后以此类推，这个表格里我可以写很多这种很多项是吧，哎，可以很。

多项啊，那现在我们来看看，像这种表格我们要去怎么去创建，其实这是不是非常简单呀，哎，那我们来说整一下吧。零二接着再来写这么一个表格，好，那我们要想创建这么一个表格，我是不是先得来一个table啊，哎，Table table里边我们先来一个这个TR，那这个TR实际上是不是就是我们这个第一行啊，那第一行就相当于什么呀，是入我这个表头啊，哎，第一行相当于我们这个表头，那我们来写一下第一个单元格应该是写谁呀？哎，学号，然后第二个是我们这个，哎姓名，然后第三个是我们这个，哎性别，第四个是我们这个什么呀？诶住址啊住址，然后我这一保存CTRL运行，诶是不是出来这么一个呀？诶这是我们这个表头，那接下来我们是不是可以往下去写信息了呀，比如说复制一个，第一个是我们这个孙悟空，哎孙悟空，诶不是学号是吧，学号是一号，然后是孙悟空，性别是一个男，然后住址是一个这个花果山，诶，我们可以多写几个，走走走来一个二号，二号。

来一个这个，呃，猪八戒猪八戒猪八戒南这高老庄，然后这个三号是我们这个沙和尚沙和尚南，我们这个流沙和流沙和，然后四号是我们这个唐僧特王腾僧，唐僧男，住在这个女儿国，哎，好，你们就写这么四个啊，现在是这么一个表格，表头是学号，姓名性别，住址，然后我们这里边是不是有四个学生信息啊，一保存，然后一刷新，是这么样一表格吧，诶这么一个表格，但是你发现这表格写完了，这表格是不是太丑了是吧？诶太丑了，首先呢，我们希望这表格可以干嘛呀，可以可以宽一点是吧？哎，可以宽一点，来那我们来通过，这回呢，我们就不再去通过属性了，而是通过什么呀，我们的诶CSS直接来一个style标签，我们先来干嘛呢？

这来设置我们这个表格的一个这个宽度啊，设置我们表格一个宽度，直接来一个table table来什么呀外，比如说来一个诶300个像素吧，保存我一刷新走，你是不是就宽了呀？诶那咱们先说，诶现在这表格你发现我可以设置宽度，你说这表格它是个什么元素，哎，矿元素啊，一定要注意，Table是个矿元素，可以做个实验，我在这随便写一个东西，我是不是看它是不是独占一行啊，诶一刷新走你是不是在下边呢呀，所以注意啊，Table它也是一个什么呀，哎也是一个块元素啊，Table也是一个块元素，Table，诶是一个这个块元素，好，那宽度有了，那接下来我们是不是需要它来一个，这个是不是可以居中啊，诶居中来设置它的居中，怎么样的居中啊，直接来一个marin，来一个零，然后来一个凹two保存这一刷新走，你是不是整个居中了，诶居中完了，那接下来我们要干嘛了。

我们是不是要给他设这么一个边框啊，哎，边框，那我们来给他设置这么一个边框，边框就简单了，是不是我那个包ER啊，诶边框直接来一个这个B啊低呀，Borderder我们来一个一个像素吧，然后来一个这个solid，然后来一个这个black，诶黑色边框保存，我们来看效果，这一刷新走你诶是不是E就出来了呀，但是发现这好像有点小问题啊，你这框。是不是只有外边有啊，而里边是不是没有啊，哎，而里边是没有的，所以这个框我给table设置合不合适，我希望是我每一个单元格是不是都有块啊，那所以我这应该给谁设置最好，是不是应该给我TR呢？是不是就是每行有一个框了，哎如果能设置的话，那就是每行有一个框了，每行也不对，我们应该什么呀，是不是每个单元格都有框啊哎，每个单元格都有框，所以这个框们应该给谁设置啊？哎，给TD设置，那我把这个table这个我先给它住了啊，住了直接来一个这个TDTD，我们来什么呢？来一个这个border，一个像素，然后来一个solid，然后来一个black，然后一保存，咱们来看效果，这一刷新走你，诶是不是框出来了呀，但是发现又不对了，这每一个单元格，这个框，每一个框是不是都是独立的呀？哎，它并没有是不是连到一起啊，哎，没有连到一起，那我一想那得了，我把这个table框我还得整回，整回我们来看效果，这回保存一双。

大心走你，诶这是不是连起来了，诶连起来但是好像效果跟我们想的还不太一样，这连起来你会发现我们说了每一个table都有框，然后每一个PD都有框，然后整个table是不是一个大框啊，就发现什么了，整个他们这个边框组成了一个这么一个什么呀，是不是有点像一个双线的边框这么一个效果呀，哎，双线这么一个边框效果，那这个效果呢。

还可以是吧，还可以，但是我们呢，可能不喜欢，不喜欢这种效果，我希望什么呀，我就一个单线的，我不想要什么呀，双线的，那这玩意怎么办，那意怎么办，诶我们来看啊。现在我们说了这个边框啊，能小一点，这个边框是我们的什么呀？是不是TD的呀，外边这个大边框是什么呀？Table漏吧，你发现我这个小边框还有大边框，他们之间是不是有这么一个，是不是有这么一个距离啊，诶边框之间有这么一个距离，那我一想我把这个距离给它去掉以后。是不是就没了呀？哎，那注意这个距离可不是margin啊，这个距离可不是marin，那这个距离是谁呢？这个距离其实就专门有一个属性是干他的，叫什么呢？叫做borderulder sping啊borderer sping叫什么呀？边块之间的你什么呀距离，那么直接在这来写一个叫什么呢？叫做borderer speaking bordererwing，那这里边我们来说一下什么呢？Table和我们这个TD什么呀，边框之间干嘛呢？哎，默认有一个什么呀，有一个这个距离啊，有一个距离通过什么呢？通过我们这个borderer SPA可以干嘛呢？属性可以诶来设置什么呀，这个距离，比如说我这来一个，咱们来一个大点的吧，我来一个这个五个像素保存，咱们来看效果啊，我这一刷新走，你这距离是大了呀，哎，那我还不过瘾，我来什么呢？来一个50个像素走你。

哎，是不是就很恶心了是吧？哎，很恶心了啊，所以注意通过这个border swing可以调整我们这个边框之间的这个什么呀距离，但是我这我这种调法是不是越调越大呀，那我希望什么呀，是不是距离没有啊，所以直接来什么呀，0PX1保存，这一刷新走你是不是变成单线的了，哎，就变成单线的了啊，但是这又带来一个问题，单线是单线，但是这单线它有点粗是吧，那有点粗了呀，哎，实际上它是什么呀？Table一个边框。

表格这个什么呀，一个边框，两个边框之间距离没有，是不是两个边框合到一起了呀，所以我虽然设置一个像素，结果显示的效果是什么呀？哎，是两个像素啊，是两个像素，而我西部像是两像素，我还是希望我设置一个像素，你是不是就是一个像素，那这块我要怎么办？诶我希望边框是不是可以合并啊，换句话说，两个边块你是不是合可以合并成什么呀，是不是一个呀，哎，一个，那这块要怎么做呢？诶还有一个属性叫什么呢？叫做一个borderder bur DR borderder collaps啊collaps它有这么一个值就叫什么呢？就叫collaps啊，就叫collapse，我们来看效果啊，我们先看效果，我这一刷新走你干嘛了，是不是变成一个像素了，哎，一个像素了啊，所以这里边叫做一个borderder clas，这也是专门给我们表格来设置的board class可以干嘛呢？可以用来设置我们这个什么呀，诶表格的这个什么呀，哎，编框合并啊叫什么呀，可选值我们。

啊，用的谁啊，就这coll clas，诶coll clas表示什么呀？表示合并啊，表示合并，那现在来看这回是不是就没有这个问题了呀，为什么没有了，因为两个编排已经干嘛了，合并成一条了，就没有这个问题了，甚至说诶我连我不给谁呀，我不给这个table指定边框，我们来看效果是不是也行啊，哎，我可以直接把边框指定给谁啊TD而干嘛呀都不给我们这个body，给这个table去指定就可以了啊，就可以了啊，我们这borderder clubs一个边块的一个合并，所以这里边注意啊，涉及到我们这个表格的，其实主要就这么两个，一个是borderer SP，还有一个是borderer clubs，那你注意了，现在我们边框是不是合并了呀？来borderer SP，我来什么呢？十个小图保存，我们看效果，这以刷新保你有没有作用，哎没有作用啊，没有作用，诶那我们来干嘛呢？我把它往下挪挪，我们看保存是不是也没有用啊，哎，也没有用啊，所以注意们什么意思，如果设置了我们这个边。

分块合并则什么呀，我们这个borderder SP干嘛呢？自动失效啊，自动失效因为什么呢？你都让他们合并了，你的距离还有没有意义了，没有意义了啊，所以注意，一旦设置这个东西，我们这个BORDERER4SP性就自动去失效了啊，自动就失效了，好，那这一块我们就看完了，所以这里边呢，其实我们指令边框其实不用给什么呀，你不用给table指令直接干嘛呀，给table指定一个borderder clubs，诶这个东西你也不用写了啊，这东西也不用写了，直接指定一个borderder clubs设置什么呀，Clas，然后再给什么呀，给TD指定一个边框是不是就OK了呀？诶给TD指定边框就OK了啊好，这就是我们说这么一个效果啊，一个效果边框的一个设置，然后再看啊，我们还有什么东西需要处理的，这里边呢，我们直接干嘛呢？哎，这样，呃，我们发现这个字儿吧，它干嘛呀，你看我们这个表，这个学号啊，性名啊，性别呀，住址这叫什么呀，这是不是叫我们这个表头啊，但是你会发现我们这个表头。

它是不是用的也是什么呀，也是TD吧，也就说我这个表头和我其他的单元格实际上有没有区别呀？哎，没有任何区别，那有的时候我希望什么呀，我希望区分出哪是表头哪是表格的一个内容，那干嘛呢？那我这就不能用TD了，那还有一个标签叫什么呢？哎，叫做一个TH，诶咱们先直接写吧，我把这些TD呢都换成什么呢？TH啊，把第一行里边TD都换成这个TH，诶H表示什么呀？Head啊头的意思，我们先看效果啊，我这一刷新走你诶首先一看学号，姓名、性别，住址，你看是不是加粗了呀，加粗了还有点什么呀，是不是居中的效果呀？哎，居中效果啊，这都是我们这个表头的一个默认样式，但是发现什么了，边框是不没了呀，边框为啥没了呀？哎，我的边框是给TD设置的吧，现在变成什么了，TH了，是不是就没了呀？哎，你可。

嘛呀，哎，你在TD再来一什么呀，逗号来一什么呀，TH给这两个编号是不是同时设置啊，这回一保存再刷新走，你是不是就回来了，哎回来了啊，所以你注意TH的作用呢？哎，它就是什么呀，TH就是一个特殊的什么呀，TD啊，TH就是一个特殊的TD，我们可以什么呢？哎，可以使用我们这个TH标签来干嘛呢？来表示什么呀？诶表头中的什么呀？内容啊，表头中的内容它的什么呢？它的这个用法和什么呀？和我们这个替列一样，诶不同的是什么呀？哎不同的是它会有一些什么呀？诶它会有一些这种默认效果，什么默认效果呀，其实就俩居中还有什么呀，加粗啊居中还有加粗，这是我们说这个PH啊，我们这个表头啊，好，那这一块看完了，然后我们这个表格其实就还也就差不多了是吧，也差不多了，然后干嘛呢，我们来啊，咱们多写几个数据啊，多写几个数据直接就。

C我这复制一下，多写几个数据，现在这个表格变成了，变成一个非常非常的什么呀，长的一个表格了，那这一块就出来一个问题了，表格虽然很长，但是我们说这个颜色白布撕裂的。都不太好看是吧？哎，我们希望他是不是有一个这个背景颜色呀，哎，那怎么给他设置背景颜色呀？哎，咱们讲过了，是不是background color啊，哎直接给谁啊，给我们这个table来一个什么呀，背景颜色设置我们这个背景颜色直接来一个background，一个color background color来什么的，来一个井号BFA啊是一保存，然后一刷新走，你是不是整个都变绿了呀，但是我们发现你让它整个都变绿了，其实呢，它也不是特别的好看是吧？哎也就是说什么意思呀，我这表格行与行之间的清不清楚不清楚啊，行与行之间的实际上并不清楚，那我希望什么呀？那咱们说我读一个长表格时候，经常会有一个问题，可能我从这开始读的，读读读可能后很长很长，读到后边干嘛了？他读到这儿了，我一读，哦，唐僧原来住在花果山，谁让我是干嘛了，我是不是读串行了呀，因为我这行的颜色是不是都是一样的呀，那我就希望什么呀，我。

希望啊，你别统一是这个颜色，我希望什么呀，隔一行变一个颜色，也就是说你第一行是个什么呀，绿色的，哎，第二行你还是什么呀，白色，然后我第三行是不是还是绿色呀，哎，也就说我希望你是一个隔行变色的，所以这个背景颜色我在这儿给我们这个table设置行不行，你给table设置还能不能分出哪行是哪行了，你给TABLE1设置是不是所有都有了呀，我们希望的是隔行变色，隔一行变一个颜色，那这个背景颜色我应该设置给谁，是不应该设置给TR啊，哎，设置给TR，那我直接来一个来一什么呢TR，然后来一个background，哎，Color来一个井号BFA，我一保存一刷新走你，哎哟。

没啥区别是吧，没啥区别，那这是为啥我TR表示的是什么？是不是就所有的TR啊，所以你跟写table呢没有什么区别，那我希望的什么呀？是不是隔一行选一个，隔一行选一个呀？诶那也就是说我我想选什么呀，我可能想选择这种偶数行的TR，或者选什么呀，选这种奇数上TR吧，那这块我怎么选？诶我们是不是有一个子元的那个尾元素啊，哎，叫什么呀，叫做一个nth child吧，或者是nth of type是不是都行啊，这两个什么区别呀？一个是在所有的子元素里排吧，一个是在当前类型的里边排吧。哎，所以干嘛呀，我就来一个NT叉，咱们这块无所谓来什么呢？NT叉来个一表示什么呀？是不是第一个T2啊？哎，我要NT是差L的二的表什么呀，是不是第二个T2啊，那我现在你第一第二也不行，我需要选择什么呀，偶数。

偶数行的怎么办呀？哎，ODD是不是基数行啊，偶数行是不是就是我们这个evn呀，哎，我这一保存咱们来看一刷新走你看到了吧，哎这样就有一个隔行变色的一个效果了啊1EN表示什么呀，偶数啊如果是什么呀，ODD就是什么呀？哎易刷新是不是基数上变色了，哎基数上变色了啊这是我们说的这个隔行变色这么一个效果，那这样这个表格读起来是不是就。就方便多了呀，哎，就方便多了啊，这是这么一个效果啊，这么一个效果，诶那然后除了可以做这个效果，还可以做什么呀？那们说了，诶我希望什么呀，现在我读的是稍微能顺溜一点，但是我希望什么呀？有可能我鼠标移入到这儿，我移入到第三行，是不是表示我正在读第三行啊，我希望什么呢？当我鼠标移入到第三行的时候，你第三行干嘛呀，再变一个颜色，我是不是能知道我选的是哪行啊？诶那这块怎么办？诶是不是鼠标一入到哪行里，是不是哪行变颜色呀？哎，那怎么办啊，是不是我们这个后啊啊注意这个后给谁设置TR吧，哎，TR冒号一个后尾直接来一个，换一个背景颜色background color，来一个井号FF0，来一个黄色的，来这一刷新走，你现在没事，当我移到一行，是不是这行变颜色了，哎，移入到下一行，是不是下一行变颜色了？哎，移入到哪行，哪行就变颜色，这样我们读起来是不是就。

更清楚一些，诶更清楚一些啊好，那这是我们这两个效果这一块呢，我们来补一下注释啊，这个是我们为我们这个表格设置什么呀，设置我们这个边框，这个是设置我们这个隔行变色，诶然后下边这个呢，是什么呀？是我们说鼠标移入到，呃，鼠标移入到我们这个TR以后干嘛呢？诶改变这个颜色啊，改变颜色，这个是我们说这么一个简单的一个效果啊表格一个简单效果，但是注意这一个问题，什么问题呢？我们直接看谁呢？我们这个IE6I61刷新。

发现什么了，隔行变色是不是没了呀？哎，没了为啥没了呀，这玩意儿I16它不支持啊，不支持后位，IE6支不持啊，支持我们A的后位是不是行啊，但是注意有用吗？没用啊，我们说了IE6不支持为A以外的元素去绑定，后边还有什么呀L，所以这个在A60完了，你就没法看了啊，就没法看了，如果要兼容来也个这一块只有一个办法，GS啊只有能只有用我们这个GS了，或者说你就选一个什么呀，特别特别麻烦一招了啊，所以麻烦一招了啊，那咱们现在就不管它了啊，就不管它了，诶当然了，其他浏览器呢，就什么呀，没什么问题了，比如说我们这个IE11都是可以正常的，哎，我们来看看谁呢IE8吧，八是不是也不零啊，哎，八也不灵，那这里边呢后是可以的，但是什么呀，我们这个NT是child的，它是干嘛呀，它是不支持的啊，它是不支持的，所以注意这个东西在IE8及以下的浏览器都是不支。

是的，但是艾叶九是不是就没问题了，诶艾九是没问题啊，好，这也是我们说的这个隔行变色这么一个效果啊，那如果尖容I18只能是什么GS了啊，只能用我们这个GS来实现了，好，那这一块我们来先停一下。