尚硅谷前端基础 (96)

好，那么接下来呢，我们CSS这些基础知识我们可以先暂时告一段落了，但是CSS后边还有一些比较，呃，有难度一点的，对吧，像一些动画的效果呀，哎，像一些这种3D的呀，哎，像一些我们这种更高级的布局方式，我们还有一些知识点，但是这些呢，我们放到后边再说啊，我们做完第一个项目，然后我们再去讲解这些知识点，那我们之前讲这个HTM的时候，我们还提到过一点，对吧，我们说HTML实际上我们还没有没有说完啊，有一些标签我们并没有去讲，那接下来呢，你就可以再回过头来对我们这个HTML进行一些诶补充啊，进行补充，那在这个里面我们还是来新建一个文件夹，我们叫做一个0707啊，我们这一块我们来说一下为毛啊，继续来做一个补充，H hipl里边我们要先说第一个，我们叫做一个table，也就是我们的一个表格。

表格，那什么叫表格啊，哎，什么叫表格，那这里边我们来说一下，哎，那在我们的现实生活中啊，在我们这个现实生活中，生活中我们什么呢？我们经常需要使用这个表格来表示一些什么呢？诶一些我们这个格式化的一些数据，现实生活中经常需要用表格来表示一些格式化的数据，哪些数据属于格式化数据，比如说我们用到我们的课程表，对吧，课程表周一一节课，周一第二节课，周一第三节课，课程表还有什么呢？还有我们的这个人名单啊，还有我们这些成绩单等等等等，它都是属于这种格式化数据，那表格长什么样子啊，表格长什么样的，那就是一个方块对吧，它可能是里边有什么样一行一行的，然后有什么呀。

有一列一列的，那这玩意儿是不是就叫一个表格啊，那可能最典型的就是我们电脑里的那个Excel啊，Excel我们直接打开Excel，那这个时候Excel它这个是不是就是一个就是一个表格，哎，这是表格啊，那表格其实很简单，就是用来表示一些格式化的数据的那列的，就像我们这些成绩单啊，哎，报价单啊，哎人名单啊，哎还有各种各样的各种各样的表吧，哎，各种各样表，这个是我们说现实生活里的，那同样在网页里，我们实际上是不是也会遇到这种需要使用表格的情况，诶，比如说我可能就是想表示一个成绩单，比如说我就是想表示一个课程表，那这个时候毫无疑问我是肯定需要用到表格的，那所以同样哎，同样哎在网页中，哎，我们什么呢？哎，我们也需要使用表格，那问题来了，我们怎么创建表格？哎，我们通过什么呢？哎，我们通。

通过这个诶table标签，诶table标签来创建一个表格，所以你要想创建表格，怎么创建，直接来一个table，那它的作用就是创建一个表格，但是你这写完了以后，你会发现什么都没有，哎，为什么没有？因为table它表示的是一个表格，它表示的是表示的是一个表格的一个整体啊，表示的是一个表格整体，在我们的table里边，我们还需要去指定我们这个表格的每一个部分啊，在table里我们什么呢？哎，在这个table中我们使用这个TR来表示这个表格中的这个一行，所以在这我可以直接写一个TR，这个TR就表示一行，那注意了，有几个TR就什么呢？就有几行啊，有几个R就几行。

所以现在我有一个tr OK，那就是一行两个TR，两行三个TR，就是三行，有几个TR就是几行，当然你这写完了还是看不见东西，因为TR有了，是不是我那个每一行里边是不是还有一个一个，你看这是一行吧，这是一行吧，每一行里边是不是还有一个一个的格呢？哎，一个的格呢？所以这个时候在我们的TR中，我们需要还需要写什么呢？T。哎，在这个TR中我们使用什么呢？哎，使用TD表示一个什么呀，单元格啊，表示一个单元格，有几个TD就什么呢，就有几个单元格，所以在这我可以再写一个TD，那这个TD就表示一个格，两个TD2个格，三个TD3个格，所以我一个TD一个TR，那现在就表示的是一个什么呢？是一个一行一列的这么一个表格啊，一行一列这么一个表格，那在这里面我们可以写一个东西啊，比如说我写一个什么呢？我写一个A1，我写一个A1，那你先来看那这个，现在我这个表格就已经创建好了啊，就已经创建好了，但是我们先说了，老师，我这东西我看着它不像表格，哎，别着急，你看着它不像表格，因为你在你的思维里，你印象里表格应该是有限的，而我们现在这个格是不是没有线呀，啊没有线，所以你要想的像的话，你只需要把它加上一个什么呢？给table里加一个属性border等于一个一，那这个时候出现边框。

是不是就像了，哎，就像了，当然这种形式我们是通过HTML再修改样式，我们开发的时候是不会这么用的，但是在这儿我主要是先给你演示一下，待是我们再说如何通过CSS来设置，那这里边我们还可以干嘛呢？我还可以让表格宽一点，比如说我来一个外width，等于一个什么呢？等于一个50%，我的宽一点，我还可以干嘛呢？我还可以allow，我来个这个center，让它做一个这个居中，但是这些都不推荐使用啊，我们只是展示一下，那这里边现在它就是一个一行一列的表格，那我现在想写一个一行四列怎么办？哎，一行四列，那你就需要写什么，你就需要写四个TD啊，这来一个A2，哎，这什么呀，这是BE1，这是C1，这是B1，那这样我是不是有一行四列呀，哎，那同理，我要想写两行四列呢，哎，两行四列，那你就得干嘛，哎，你就得写两个TR，因为一个TR代表的是。

一行吗？哎，那我这来一个，这是A2哎B2C2哎D2是这么一个，哎，那我要写四行四列呢，哎，那你就需要再复制两个题二啊，两个题二，那这是一个A3B3C3D3，这也是啊，A4B4C4还有一个第四啊，那就是这样一个结构，那这样我就实现了一个四行四列的一个单元格，所以啊这表格啊，所以你要创建表格，你要注意了PR。

啊，TR有几个TR就是有几行，有几个TD，就是有几个单元格，那现在我们这个表格就是一个四行四列的啊，非常简单，然后再来看。那我们除了这种常规的表格以外，我们经彻有什么表格呢？诶经彻有这种情况，那比如说我现在C4和D4对吧，这两个格，我现在希望这两个格他们是一个格，也就说我第三行只有三个格，没有什么呢？没有D4，而C4他一个人要占什么呢？占两个格，那怎么办呢？哎，有人说老师这还不简单吗？你直接把第四给删了不就行了，第四删了最后一行是不是三格啊，三个格C4自然而然是不是占两个格了，哎，我们看效果，一山有没有C4小说第四还有没有了，没有了，但是这个时候C4它有没有一个人直接占两个格，没有，为什么没有？诶注意了，我们的这个表格啊，我们这个单元格都是非常有觉悟的，哎，它后边的格虽然空出来了，但是它默认还是只占什么呢？只占自身大小，它不会占用后边的格。如果你希望让它。

占用怎么办呢？你需要给它加一个属性，叫做一个cos弹，然后写一个二，那就表示什么呢？我要合并两个单元格，那这时候你看C4是不是就占两个格了，哎，C4就占两格了啊，所以这个时候我们来说一下，我们叫做一个cos SPA cos SPA叫做合并两列，它叫什么呢？叫横向的合并单元格，横向的合并单元格，所以我写一个CO482就表示什么呢？我C4这一个格要横向占两个格的位置啊，要占两个格的位置，那同理，比如说我们是不是还有纵向合并啊，哎，比如说我希望第二跟第三他们两个是一个格，那怎么办呢？你可以先把第三给它删了，然后在第二这你同样需要写一个叫做Rose SPA叫做一个什么呢？二，那这个时候第二时候把第三的位置也给占了，诶，那这个我们叫做一个什么呢？这个我们叫做一个纵向的和。

合并单元格叫做一个Rose SPA啊，这是一个Rose SPA，哎，那这玩意儿其实套路都差不多啊，套路都差不多，Co SPA横向合并，我们的Rose SPA叫做一个纵向合并啊，叫做一个纵向合并，这个呢比较简单，然后的话，我们。表格的话，我们先做一个基本介绍，那这里边注意了表格的三个主要标签，用的最多的，第一个table，第二个TR，第三个TD table表示的是整个表格，TR表示的是表格里的一行，而TD表示的表格中的一个单元格。好，我们先停一下。