82.尚硅谷_HTML&CSS基础_长表格.avi原创

我们再说一下表格啊，其实我们常用的表格，你把这几个记住就行了，然后还有一些呢，其实用的没有那么的多，诶，但是我们需要了解一下这么几个东西，零三我们叫什么呢？叫做一个长表格，什么叫长表格啊，就是很长很长的表格是吧？嗯，我们什么时候会用到长表格呢？举个例子，以后你们找工作的时候可能会有什么呀，有一些公司要求你去要出示你那个什么呀，可能你近一立年或者近两年的这个银行的一个流水啊，流水什么叫银行流水啊，就是你整个的一年什么呀，我这银行里我收入了多少钱，我支出了多少钱等等这一系列东西，对吧？哎，那这个东西呢，可能需要这么一个东西啊，能有这么一个叫什么呀，表头是这样的，有一个日期，诶日期可能有一个什么呀，有一个这个收入，哎，可能还有什么呢，有一个这个。诶支出是吧，诶支出然后最后一个什么呀？诶合计是这么一个，那举个例子，我直接来写一个啊，你可能你是这样的，2016年，2016年的这个10月24日啊，10月24日，我收入可能多少呢？收入来一个这个呃500，支出呢是一个，呃来一个300，可能合计就是多少，合计是一个200对吧？诶这可能是我一天的这么一个合计的，当然举个例子是吧，当然可能银行这个可能不是我这么写的啊举个例子，那这个信息可能很好呀，你这一年的信息或者两年的信息是不是会很多呀，可能300多条，可能好好几百条能网上，诶可能大概是一个这这么一个效果啊，这么一个效果，这些信息写完了以后呢，他会干嘛呀，会在表格最后啊，最后可能在这个位置有个什么呀，有一个总的一个合计，合计什么呀，合计你这一年是干完了是剩下多少钱啊，可能最后来一年剩下什么，剩100块钱，诶按这个意思啊，我就没有去算那个数了啊，没有具体算，他应该把这些200都加起来是吧？诶这200加起来。

我这块要简单写一下合计，哎，可能干嘛了，剩100了，哎，那是不是这个表格它会干嘛呀，会很长很长吧，那你会发现什么呢？我这个表格就明显分出了三个部分，哪三个部分呀，第一部分是我这个表表头对吧，然后中间这部分是我们表格的一个主，主体的一个什么呀，内容，哎主体内容，那这一部分是我们表格里什么呀，是不是底部啊，诶分成这么一个长表格，那这一种表格在我们网页里要去怎么去创建呢？诶那我们这直接说一下啊，实际上我们先写一下吧，直接来写一个长表格，首先呢，还是没得说，肯定是拿什么呀，拿这个，诶咱们不能这么写了是吧，你这么写他给我生成一堆没用的东西啊，没用东西给它去掉，直接来一个table，然后table完了再来一个table啊，就创建一个表格标签，我们来怎么创建长表格呢？诶我们来说一下什么叫长表格。

有一些情况下，有一些情况下，我们这个表格是什么呢？表格是非常的什么呀，非常的这个长的，那我们就什么呢？这是哎，就需要将我们这个表格分为什么呢？分为三个三个部分啊，分为三个部分，咱什么部分呀，我们这个表头还有什么呀，表格的一个主体啊，绊格一个主体，还有一个什么呀？哎，表格的一个底部啊，表格一个底部，那我们来说一下我们这块是怎么分的啊，怎么分的表格的一个底部，那这里边什么呢？诶在我们这个HL中，哎，在我们这HL中。

哎，为我们提供了什么呢？提供了三个标签，哎三个标签哎，哪三个标签呢？叫做一个t head，哎，Hi，什么意思？头部啊，T就是table，哎，T had表什么呀？表头啊，这是一个什么呀？表头还有什么呢？还有一个叫做t body，诶tea还是那个table表格意思body表示什么呀？主体，哎，身体，这是我们这个表格是什么呀？主体啊，表格主体内容，然后下边还有什么呀，叫做一个T附，诶T附的表示什么呀？表格的一个什么呀？底部，表格的这个底部，哎分成这么三个部分，那这边我们要说了，诶这个三个标签。

这三个标签的作用就是干嘛呀，诶就是来，诶区分什么呀，区分我们这个表格什么呀，诶不同的部分，他们都是table的什么呀，子标签啊，都是table的子标签，都需要什么，换句话说都需要什么呀，都需要直接干嘛呢？写到我们这什么呀，Table中啊，都直接写到table中，所以这会怎么写，我直接来一个T，诶，T had，诶然后再来什么呢？来一个这个T，哎，T body，然后最后再来一个T负，哎，这就表示我们将我们这个表格分成了这么三部分，头部主体还有什么呀，底部，那问题就来了，我写完T踢包底踢负子，写完这个堆玩意儿以后，我T哪写TR上写啊，不写肯定不行，不行，你是不是没行了呀？哎，我们来说TR，诶需要干嘛呢？诶写在这些标签。

当中啊，列表当中，比如说我表头，表头里边有几个天啊，表头里边有几行啊，是不是一行啊，哎，我看表头什么呀，日期收入支出是不是合计啊，哎，那表头里只有一个TR，几个单元格呀，诶是不是四个呀，我可以写什么呀，写TH，哎，来四个TH，第一个是我们什么呀，日期，第二个是我们这什么呀，收入，第三个是我们这个支出，这也是我们这个合计，这是我这个表头啊哎，所以t had里边内容就表示什么呀，表头啊，表头，而T包那里边是什么呀，是我们这个主体的一个内容里边直接来什么呀，TR，哎，但是T包里边有几行啊，不一定了吧，哎，主要内容有几个，数据就有几行，我这来写一个TD，四个TD，我这写一个啊，写一个十月24，然后这收入，呃，收入500，支出300，合计200，这是这么一个呀，哎，当然我可以写什么呀，我可以写很多条啊很多条。

我一保存是这么这么多呀，诶，然后CTRL在我们这个火狐里运行一刷新是这么一个效果呀，咱们就不给它做格式化了啊，但你们感兴趣自己去设置一下，我就不再做格式化的问题，不再做这个设置边框了，我们只要看一个长表格啊，然后后再来看我们这是不是最后还有这么一个底部啊，底部在我们这个表里，底部是不是也只有一行啊，只有一行，那只有一行，那我问你了，这一行里有几个单元格有几个呀，实际上也是四个，只不过前面两个我是不是不用啊，哎，前面两个我不用啊，所以实际上也是四个来四个TD走，你前面两个不用，后边两个一个什么呀，一个这个合计一个是我们这个一个金额，比如说来一个一百一保存，咱们一刷新走你，诶我这写嗯这封了是吧，没有写什么呀，没有写TR来保存一刷新是不是这么一个效果呀，诶上边我们是这个表头，中间是我们表格的一个主体，下边是一个表格什么呀，底部那实际上这三个标。

他做那干嘛呀，就把这个表格的三部分给你区分开了，区分开有什么好处，我可以干嘛呀，我是不是可以单独的给tbo t还有t food去单独的设置样式，诶这是一个好处，还有一个什么好处呢？那我们说了，当我这个表格过长的时候来。多长呢？CTRLC我多复制几个，可能我这个表格干嘛呀，特别长啊，这一刷新走，你是不是很非常非常的长啊，诶那这个时候注意啊，那你像这种对账单我们往往是干嘛的呀，这种明细我往我们是需要去。打印出来的吧，诶，那打印出来就带来一个问题，什么问题，那么想想，我一打印，我这一打印可能打印好几页是吧，但是注意了，那打印的时候可能干嘛呀，可能咱们假设啊，它是这么分的，这是一页，这是一页。

这是一页假设啊，那我们会发现有一个什么情况，表头只在第几页，是不是第一页呀，第二页，第三页包括第四页能看见表头吗？看不见，而我们这个表格底部只在哪啊，是不是只在最后一页呀，前边是不是都看不到啊，那这样打印的时候，我们会发现中间这个数据就看起来就干嘛呀，就特别的诡异。对吧，这东西到底是什么，我们是不是看不出来呀，所以我们就希望什么呀，诶我希望什么呀，你不仅打信打印信息，我这个表头，还有这个表格的一个什么呀，底部，你在每页是不是给我打印一个呀，那我们想想，如果我没有把这个表格分出了这么几个部分，那我们能不能处理啊，不能处理，因为我们根本就不知道谁是表头，谁是底部吧，诶谁是底部，所以通过把这个表头，还有这个底部，还有我们这个主体区分开了，我们打印的时候也是一个什么呀，哎，方便我们去处理这个打印的一个一个效果，那还有什么效果呀，还有什么效果呀？诶那其实我们这个数据经常要改的，其实主要是谁呀，可能我们这个表头可能需要去处理一下，还有谁呀，还有我们这个表格的一个什么呀，底部需要改，但是你这块改的时候，你会发现一个问题，我想干嘛呢？我想改表头改完了是吧，然后要干嘛呀，改底部，那我怎么改呀，走走走走走走走往下一直拉拉到批负的，然后是不是再改啊，改完了可能我又想改表头了，干嘛呀，往上一直啦啦啦是不是改到表头啊，这样改就很麻烦，但是注意了看着啊。

我可以干嘛呢？我可以把t foot写到页面的前面，比如说就写到T下边，你看我是不把表格的底部数写上面了，诶我们来看显示效果，我这一刷新走你它是不是还在里边啊，哎，还在里边，所以注意T附的内容是不是永远在底部显示啊，而T下的永远在什么呀上边显示，那这样我们干嘛了，我这是不是想怎么写就怎么写，我维护起来是不是也方便一些啊，哎，也方便一些啊，所以注意啊，我们这个T。Head t body，还有t fot，只要就是用来干嘛的呀，帮我们这个页面进行一个什么呀，分组的啊，分组的分成这么一个三部分，然后我们来说一下什么呀，T hi中的这个内容干嘛呢？哎，永远会什么呀，哎会显示在我们这什么呀，哎表格的一个头部啊有是显示到表格最上边，即使你把它干嘛呀，你把它写到什么呀最里边，当然这这种需求肯定没有是吧？哎没有一刷新它是不是也跟上边啊，哎即使要最里边它也在上边，而我们这个什么呀，T附的内容。

T附的中的这个内容，哎，永远都会在什么呀，都会显示在我们这个表格的什么呀底部，诶无论你写到哪儿都是这样的，诶而这个teabo呢，诶中的这个内容干嘛呢？永远都会显示在我们这个表格什么呀中间啊，显示在我们这表格的中间啊这是我们说这三个标签，T had t负踢body，但是实际应用中的这三个标签用的呢，不多啊，用的不多，这里边唯一有一个关键的，我们要说一下谁呢？说一下我们这个t body啊t body比较关键啊，我们拿刚才我们做这个东西举个例子，刚才我们做这东西CTRL运行是不是这么一个这么一个表格啊，诶这么一个表格，那我们来看我这是怎么设置这个隔方变色的，隔方变色，我是不是用一个TR冒号一个ntr child呀，诶那我一想我这么写我来一什么呢？来一个tab Le空格TR冒号n tr child，我这么写行不行。

我是不是多了一个祖先后代，这是一个后代元素显测器吧，其实我就给他多加了一个约束，你得是什么呀，你得是我这个t table的一个什么呀，后代元素吧？那TR是不是table的后代是，所以我这么写有没有问题啊，没有任何问题啊，我这一刷新走你是没问题啊，好，但是我来看，我发现TR不仅是table的后代，是不是还是table的这个子元素啊？那我一想我不用后代元素了，我用什么呀？大于号来什么呀？是不是子元素显器啊，我要选择什么呀？Table的紫元素TR，诶，那这么写行不行，咱们看效果一刷新走，你首先一眼就看到颜色是不是没了呀？颜色没了证明什么？证明他有没有找到table的子元素体。

没有，诶那这是为什么，这明显TR是不是贴不到儿子呀，但是发现郑言找不到这个TR，那这是为什么？来我们来说一下啊，咱们在这来说一下，这里边比较特殊的是一个什么呢？皮body，我们说如果页面中如果这个什么呀，诶表格中没有什么呢？没有将我们这个哎表格，诶将我们这个内容哎分成什么呢？分成或这样写吧，没有写什么呀，没有写我们这个皮body啊如果表格中没有写皮body，那注意了，我们的浏览器会干嘛呢？会自动干嘛呢？添加诶T保底自动在我们这个表格中，诶添加这个T玻并且什么呢？并且将我们这个所有的这个TR都放到这个什么呀，诶T玻中啊，都放到这个T玻中举个。

对的，拿我们刚才这注意了，我这儿贴Bo里边有没有写tbo啊，TT的这些东西没有写，没写干嘛了，你虽然没写，但是浏览器它自动给你写了一个什么呀，写了一个tboy，然后干啥呢？然后将这堆TR放到那个tboy里，那换句话说，那实际上在table和TR之间还隔着一个谁呢t body呢？所以TR是不是t table的子标签啊，不是TR是谁啊，是t body的子标签，所以你这拿table选它干嘛呀，选不着，但是如果你写的谁呢？写的这t body保存易刷新是不是行了呀？诶所以注意啊，它会自动给你添加这个提保底，诶那我们说空口无凭，我们来看看啊看看来右键查看源代码，你觉得能看出来吗？有没有啊，没有啊，回家注意，源代码是看不出来的，我们需要看的是什么呀，这个代码在我们这个内存里边的一个结构，直接摁入。

我们这个F12来fire bug结果出来了，点开body body里边是不是一个table啊，注意啊，我来点开table发现什么了，是不是里边有一个t body啊，哎，我们看到的不是提R而什么呀，而是tbo，再来点开tbo，你看我所有的这些提R是不是都在这个。T包里边了，哎，T包里边啊，所以注意，如果你不写tbo浏览T干嘛呀，自动给你加上，所以我们写表格的时候，如果是什么呀，哎，如果不费什么劲的话，尽量把这个to给它干嘛呀写上啊写上，所以这时候注意，所以注意我们什么呀？哎，TR它并不是我们这个什么呀，Table的这个什么呀，子元素啊子元素而谁呢？而是我们这个，哎，Tea body这个子元素通过什么呢？通过我们这个table大于号TR干嘛呀，无法选中我们这什么呀，行啊，无法选中这行，因为它不是它子元素需要什么呀，需要通过我们这个t body大于号什么呀，T2啊，需要通过这个t body大于号T2啊好，那这也是一个问题啊，一定要注意我们这个T这个问题啊，它会自动给你添加啊，有的时候你发现你添加完了以后，你用这个紫元素择题，你找不着这个table，或者找不着这个TR，那为什么呀，就是因为table跟TR实际样什么呀。

实际上他们不是父子关系，实际上是什么呀？是爷孙关系是吧？哎，是祖先还有这个后代的关系啊，祖先还有后代的关系，好，这是我们说的一个长表格。