83.尚硅谷_HTML&CSS基础_使用表格布局.avi原创

我们这个表格啊，表格表格其实主要就是这些东西了啊，没什么特别那什么多的东西了，再说一个就是没什么用的东西啊，那给你们了解一下啊，那实际上我们说了表格的作用是干嘛呀，表格的作用是不是用来表示一些这种格式化的数据啊，诶格式化的数据啊，那现在我们表格的作用就是这个，但是注意呢，在很久很久以前，那表格的作用呢，它主要不是干这个事的，诶在很久以前干嘛呢？哎，布表格是用来对我们这个页面进行什么呀，进行布局的，哎表格的布局哎，虽然说是很久以前，但是现在其实也有人用，但是这个东西就已经干嘛了，已经非常少了，那现在基本上在拿表格布局的，基本上就已经是什么了，就基本上就是原始人了是吧，那就是原始人了，可能半截已经埋进去了是吧，那种人，但是我们要说一下啊，怎么去用啊，我们说诶其实以前以前啊更。

多了以前我们这个表格，诶更多的这个情况，哎实际上是什么呢？诶实际上是哎用来对我们这个页面进行布局的啊，更多的情况，实际情况是对我们这个页面进行布局的，但是为什么现在不拿它布局了呀，嗯，这是不肯定不好啊，哎呀肯定不好，但是后来注意啊，以前布局是怎以前我们写一个网页是怎么写的。布局页面里边就是什么呀，一个表格去套一个什么呀，表格页面里都是各种各样的什么呀表格，换句话说，以前我们这个页面其实只用两个月就能完成了，一个什么呢？一个是我们这个table表格标签，还有什么呀，Font字体标签，诶用这两个标签就能完成一个最基本的一个页面布局了，但是这种布局呢，我们说了用起来干嘛呀，它可能写起来还比较简单，但是干嘛呢？它不方便维护，而且这两个标签它没有什么呀，没有语义，不方便我们的搜索引擎对这个页面什么呀检索，但是什么呢？诶，但是这种方式使用表格布局这种方式早已什么呀，早已被我们这个CSS所。

淘汰了啊，早已被我们这个CS所淘汰了，但是注意了，但是现在呢，还有一些网站，其实它还是采用一种什么呀，比较古老一种方式，那所以这里边呢，我们不并不要求你能掌握这个东西，但是希望你能干嘛呀，诶你能了解，能看得懂，及以后真的看到一个页面是用表格布局的，你别吓着是吧？诶别吓着你，你肯定会看到啊，你只要工作时间长了，你肯定能看到这东西啊，那这里边我们来说，那怎么用表格布局啊，其实表格布局简不简单呀，简单啊表格布局比我们用div啊，用四台这种布局要要干嘛呀，要简单的什么呀，要简单的多啊，简单多，那我们来看看那怎么去布，那咱们来说那布局这还不简单吗？布局直接来画了，我这来什么呀，来一个咱们还是纵向的什么呀，三栏，诶那这个布局我们用div的话就是三个div对吧，那我用表格怎么表写啊，哎，一个什么呀，三行一列的表格吧。

哎，三行一列的表格，那所以我们来看看怎么去布这个局啊，咱们直接举个例子啊，直接来一个这个table，哎，又出了一堆啊，这一堆呢，咱们都不要留一什么呢？Boer给他留一个，然后给它设置一个宽度，宽度来一个100%，占我页面的一个什么呀，全部三行一列，是不是就三个TR啊，每个TR里都有一个什么呀，TD啊三行一列，然后我这复制复制，诶这是不是就三行一列啊哎，三行一列，然后CTRL1运行，诶是这么一个效果，这个效果可以说是非常的什么呀，非常的糟糕是吧？诶为什么高糟糕呢？因为我们没有给它设置高度啊，给它来一个head headde也来一个100%保存你刷新。是不是连着写一块去了，这于伤心完了，那这个害呀，咱们这里边我这也糊涂了是吧？没法写100%，为啥呀，他复元素没高度吧，他复元素被内容撑开，然后你还写100%，是不是又变成这问题了呀，他找他，他找他俩人是不是没没得找了呀？诶所以这是写100%的很很傻是吧？哎，我主要给你们演示一下，不能这么写啊，不能这么说，那我这得写什么呀，写一个显示写写一个500个像素吧，哎保存一刷新，瞅你诶这是高起来了，哎这高起了，或者你不在这写也行，你干嘛呀，你不在这写你干嘛呢？你给每一个TR去设置是不是也行啊，诶给每一个TR设置也行，比如说我这来一个hi，来一什么呢？来一个100个像素，然后呢，这来1HI来一个这个400个像素，这个呢也来一个这个hi也来一个什么呀，100个呀，像素，其实这都不用写像素，直接来个100应该就可以了啊是这么一个布局，诶上中下是不是三栏啊，哎，三栏这么一个垂直方向这么一个布局啊。

垂直方向一个布局好，那这一块布局完了，但是我们说这种布局是不还比较简单呀？诶那我们接下来干嘛呀？诶我中间我需要再分了这一栏。

这一栏。哎，我说中间要分成两部分呀，那这块怎么整？哎，那我这一想，这是不是就是上边一个单元格，下边一个单元格，中间是不是两元格啊，哎，那中间两个单元格那简单了，我在中间干嘛呀，我是不是再加一个TD就行了呀？哎，我这一保存，咱们一刷新走，你中间是不是分成两列了呀？诶但是你发现什么问题了，上边这是不是也缩过了，这是不是也少一格啊，这是为什么呀？哎，注意了，我们来说，那现在我问你，我这个表格现在是一个几行几列的，哎，是个三行几列，哎，两列啊，它是一个三行两列的量格，所以这里边我们要说一个问题，行我们不说了，有几行，有几个T是不是几行啊，我们说表格的这个列数由什么呢？由哎叫做什么呀？TD最多的内行决定。

哎，由TD最多那行决定，所以我们来看哪行TD多呀，是不是中间这行啊，现在有几行有几个TD啊，两个TD，所以现在我们就是一什么呀，就是一个两三行两列这么一个单元格啊，三行两列这么一个表格，如果我这是什么呀，我这又来一个TD能表示什么呀？哎，三行三列，所以注意表格的列数由什么呀，由TD最多的那行决定，谁多干嘛呀，以谁为准，所以现在我这个表格是一个什么呀，是个三行两列，那所以你看我上边这是不是给你空出一个单元格来呀？哎，那既然是三行两列，那我们希望这一行这一格干嘛呀，你是不是占两个格啊，这格是不是也占两格啊？所以上下我是不是都得给它合并啊，哎，合并啊，所以我这来什么呢？给它这来一个扣扣SPA扣SPA来一个什么呀？二然后这儿也来一个这个抠死SPA来一个什么呀？二一保存一刷新，是不是这样才出来呀，哎，然后同样这里宽度我们是不是可以调整一下啊，然后。

这个格呢，稍微的窄一点，这个格稍微的宽一点，所以这里边我直接给他来一个这个YYS，我让他百分之20%吧，然后剩下这个80%。然后一保存一刷新走，你是不是就分开了呀，啊就分开了，然后再看，然可能还要分了，我希望干嘛呀，在中间这我再来分两个，上边一个下边一个，那这怎么办呀？哎，我这一想TTD里加TR肯定不行是吧？哎，T加TR肯定不行，哎那我们想想，那我一想这是不是就把就是不是多了一行啊这。多了一行吧，多了一行，然后垂直上再合并吧，但是我发现这么一整吧，就太麻烦了，我要新添加一行，然后我是不还再合并去太麻烦了，那我这一想，我除了来回的合并，我还有没有什么其他的方式，哎，我们来说表格，我一想我这是不是又分成一个上下两列呀，实际上就相当于什么呀，是不是相当于我在这里边又写了一个两行一列的这么一个表格啊，那我一想，那我如果在这TD里边，我再套一个表格是不是就行了呀，哎，就行了啊，所以注意我们的表格是可以干嘛的，哎，表格是可以嵌套，哎，我们可以什么呢？可以在我们这个TD中干嘛呢？诶再放置一个什么呀，哎，一个这个表格，所以我们就来看，那我们现在想干嘛呀，我是不是想把中间这个分成上下两部分呀，那于是干脆一不做二不休，在这个TD里边放一个什么呢？再来一个T，再来一个table，那table里边干嘛呀，来两个TR，诶TR里边。

都是什么呀？是不是就是两行一列这么一个表格啊，诶然后这一调整往下一走，保存这一刷新走你诶没设置什么呀，没有给它设置一个folder来个一，这一刷新走你诶这表格是不是出来了，看到吧？诶但是它比较什么呀，比较小是吧？诶比较小咱们给他设置一什么呀？诶设置一个这个wise wise来一个100%，Has呢，也来一个100%，这个就有高度了啊一保存这一刷新走你是不就过来了啊，哎，就过来了啊可以通过它去调整，那我们说了，如果我想把上面再分，我是不是还可以套表格啊，哎，还可以套表格，所以你会发现什么呢？你会发现我们用表格布局实际上比我们用div的实际还要干嘛呀，要简单一点，无非就是大表格里边套中表格，中表格里套小表格，小表格里套什么呀，套小小表格啊，套小表格，但是这么写完了以后，写的时候其实很容易，这么一个东西，你随便你第一天学H编号你也能写出来，对吧，写完了很容易。

但是这东西差在哪啊，哎，维护起来干嘛呀，它会非常非常的不好维护，你可能干嘛呀，我可能只你会发现什么呀，刚才我是不是想在中间去加两个格啊，你会发现我改中间的同时，我却不得不去动什么呀，上边还有下边吧，哎，这种情况耦合起来干嘛呀，太严重了啊，太严重了，而且我们来说我这个表格套表格，表格套表格，你看它这个层次是不是非常多呀，你看table里边一个TRTR里边一个什么呀，TDTD里边还有什么呀，Table table里边又一个TRTR里边是又一个TD啊，那我如果在这个TD里边再去套表格，是不是层次又多了呀，层次非常非常多，那注意了，这种页面非常不利于什么呀，我们搜索引擎去检索啊，非常不利于我们搜索引擎去检索，而且说白了，你这TD什么意思呀，是个单元格吧，他有没有羽翼呀，没有羽翼，我这里边写个孙悟空，我问你我这个什么孙文婷知不知道是啥呀，压根就。

不认识，所以注意这种，这种页面搜问婷压根都不理你，挨饿不理你，所以注意一定要避免使用这个表格去布局，但是呢，你要真的见到了，你也干嘛呀，你也认识啊，你认识啊，你去改呢，你也最好能去改啊，你去改，但是呢，你自己千万干嘛呀，千万别这么做啊，千万别这么做啊，这么做呢很丢人是吧？哎，很丢人，来，我们来停一下。