尚硅谷前端基础 (98)

那好，那关于表格这些标签呢，我们等于给他已经哎说了一遍了，那其实呢，虽然标签有很多啊，但是实际上最常用的啊，还是table tr TD这三个，至于t hi呀，T body啊，T food的这些标签，它是在一些特殊情况下会用到的啊，所以通常的话我们就哎T哎，Table tr还有TD够用了，然后呢，我们来说一下我们这个表格相关的一些这个这个样式啊，因为我们这说了半天啊，还只是纯HTML的，接下来我们来说样式零三。我们来说一个表格的一个样式，表格的样式这里边我们要说什么呢？哎，那说之前我们先啊创建一个表格table标签，然后我们来一个TRTR里边我们写一个表头，这个表头呢，我们写一个学生的列表吧，哎，第一个列我们叫学号啊，学号然后是我们的姓名，性名啊，然后是我们这个年龄啊性别吧，哎，性别然后是我们这个年龄。

呃，最后呢，我们再写一个这个住址啊，这个住址地址，哎，我们这里边就写了这么一个表头啊，我们先给它运行起来。大概是这么一个情况啊，那这里边呢，往下啊，我们再填几个这个具体的信息啊，具体信息比如说了第一个学生，我们的学号呢是一号，诶性名呢，我们叫孙悟空，哎，性别呢，我们叫做一个这个男，呃，年龄呢，我们是一个18啊18地址呢，我们这儿是一个花果山，诶写这么一个，接下来呢，可以多写几个是吧，CTRLCCTRLVCTRLVCTRLV。第二一个我们的二号，二号我们这个是猪八戒，诶猪八戒呢也是男，年龄呢是28啊，28住在这个高老庄，哎，然后呢，我们这个三号，三号呢我们叫一个这个沙和尚，沙和尚呢也是哎男哎，年龄呢是38哎，住在这个流沙河，流沙河啊，然后这个这个四号啊，四号我们叫一个唐僧，唐僧啊，然后呢是男，年龄呢是16啊，16住在这个女儿国，哎，女儿国好，那我们大概上我们就写了这么一个表格啊，它基本上可以说就是一个呃，表示我们四个学生信息的，当然我们要写的话，还可以接着往下写啊，我就写四个了，不多写了，那接下来呢，我们就来给它设置样式，之前我们所设置的样式。

都是通过这个标签的属性去设置的，那接下来呢，我们来通过我们的CSS设置，我们直接来一个step，那首先我们要确定一点啊，这个table标签实际上它也属一个块元素啊，你看它会独占一行，我写个AA，它是在下边啊，哎，所以table也属于一个块元素，但是它跟那个传统的跨又不太一样，因为很明显你看table现在的宽度，它并不是100%来检查一下。

你看一下这个table table的宽度，你看它现在的宽度并不是100%，你看它是不是默认带了这么一个marin啊，哎，就说默认情况下table的宽度是被内容撑开的，它不是全屏，不是100%，所以这块注意区分一下就行了，然后呢，接下来我们来说一下给它设置样式，那首先的话你就把它当成一个跨元素设置就行了，唯独不同的就是那个宽度有点小区别，所以这个时候我们给它设置样式，我直接来一个table，比如说我希望table宽一点，那我直接来一个外50%，哎，宽度是50%，这样table是不是就宽了，哎，而且你会发现当我的这个table宽了以后，它里边的TD也会自然而然的就去平均平均分配，也就是说那些就是默认情况下，我们的table是被内容撑开的，但是当你的table比较宽的时候，内容也会自动的去放大啊，自动放大，然后在这儿呢，我们可以给它设置一个borderder，诶borderder来一个一个像素一个像素，然后来一个这个诶solid，哎，然后来一个这个black啊我们设置一。

一个边框，那这时候很明显边框是不是设置上了，哎，但是问题就来了，我设置完了以后，只有table有边框，它里边的格有没有边框？哎，格子是并没有边框的，为什么呢？因为table就是外围这个它有边框，而我们这格格是不是里边那些TD啊，哎，所以如果你希望内部有边框的话，你还得单独再写一个PD，诶来什么呢？诶borderer，我们来一个什么呢？诶一个像素，然后来一个这个solid，哎，Black，这个时候你才会看到内部是不是也有边块啊，哎，但是这个时候就会出现一个比较奇怪的效果，你看边块之间它们是不是会有一个缝隙，为什么有缝隙，因为我边框是给我的，诶整个表格，还有表格里边的每一个TD是不是去设置的，那这个时候你设置完了以后的效果就是什么呢？就是有多多重边框，而这个边框之间有空格，所以就导致这个边框有点像是一个什么呢？像是一个双线的边框啊，像是一个双线的边框。

这样一个效果，那这个时候诶当然也挺好看的，对吧，但是它就不是特别灵活，如果你希望什么呢？诶，你希望是一个单线的边框怎么办呢？哎，或者说现在我们边块之间是有距离的，这个距离是这么宽，那我想着这个距离小一点行不行呢？哎，那这里边我们有个属性叫做一个borderder的一个space啊，SPA啊borderer SPA这是干嘛的呢？这是用来指定我们边块之间的距离，边块之间的一个距离，所以这个时候我们来看一下，我直接来一个borderder SPA SPA呢，我们写一个，比如说我写一个一个像素，那边块之间距离就是一个像素，我如果写十个像素，那么边块之间距离就是十个像素，它就是这么一个效果，那这里边我如果写零像素呢，那边块之间是不是就没距离啊，哎，那这样你看起来效果是不是就是一个单线的边块，哎，单线边块，但是实际上它并不是一个单线的，实际上它是什么呢？它是那个两个边。

那是不是合并成合并成一个了，哎，现在它的大小实际上是一个两个像素的边框，那这个时候也不满足我们要求，我们希望的是不是还是创建一个一个相素的边框啊，哎，所以这个时候我们要说第二个属性叫做一个borderder collaps borderderaps，它的值就叫APS，那这是干嘛的？诶我们这儿说一下这个用来设置我们这个什么呢？诶，它是来设置我们边框的一个合并啊，Collaps就是合并，它的效果就是让我们这两个边框多重边框合并，为什么呢？合并为一个，那这样还是不是双线的了，诶就是单线了，那这样我们是不是就可以去创建一个边框了，哎，所以啊，这里边注意你要是写的话，你要是想创建一个一个边框，要两个边框合并，你要用的是一个borderder collaps啊borderderaps，然后这里边我们可以写一个，你这时候你再看我在设置borderder space就没用了啊，你设置完这个collaps以后，它之间就没有空间了。

啊，所以这个borderpla就就没用了啊，没用了，然后同理啊，它是块元素，所以你要想它居中的话也是一个零，然后来一什么呢？哎，来一个凹凸，那这样它也就是直接居中了啊，直接居中了是这么一个，呃，然后的话，其实它不一样的点的话，主要就是这些啊，不一样点主要就是这些，然后就是一些，哎比较特殊的地方，比较特殊的地方，那现在的话我们来看一下。现在我们这个边框的颜色是固定的，对吧？颜色是固定的，那我现在希望什么呢？它会有一个这种情况，就是有一些时候啊，我的这个表格里边会有很多行数据，很多行数据，很多行数据的话，我们在读数据的时候，就容易读成一个什么呢？读到串行，哎，比如说我这本来是读猪八戒的，咔，我这一斜，诶猪八戒住在花果山，就是容易串行，尤其是你这表越大越宽，就越容易发生串行的情况，所以往往我们表格里边会有一个效果，它会让什么呢？诶一行一个颜色，一行一个颜色，哎，隔一行变一个颜色，隔一行变一个颜色，那这个东西我们要怎么设置，那首先我们要设置颜色的话，那这个时候这个颜色其实我们是应该给TR设置的，因为我们是希望一行一个颜色嘛，啊，一行一个颜色，所以我直接给TR来一个background color background color的话，我们直接来一个井号BFV，那这样的效果是我所有的TR都变颜色了，对吧，所有TR都变颜色了，那在。

那假如说我想干嘛呢？我想让我的单数行TR变颜色，奇数行的不变，那怎么办呢？哎，那这里边我们有一个还记得我们这个，哎，我们叫做一个伪，哎，伪元素选择器啊，我们叫做一个伪类选择器，它表示的是一个特殊的状态，我们有一个什么，我们有一个first child，它是选中第一个子元素，对吧？我们还有个什么呢？我们还有一个这个n th child是不是中第N个子元素啊，那这里边我如果写个2N的话，那就表示什么呢？表示偶数了，如果我是2N加一，那么是不是就选中的是奇数的，哎，那这样通过这样一个效果，我们是不是让这个奇数行就变颜色了，当然这还可以写什么呢？除了2N加一，我们还可以写我们这个e Eve，诶是偶数行是吧，我们叫ODD叫做一个奇数行，是不是通过ODD也可以啊，哎，通过这个ODD也可以让它去变一个颜色，那这个就是我们说的这么一个效果啊，你可以通过它，哎或者你通过什么呀。

2N，哎，加一这些都可以啊，这些都可以好，那这样我们就达到一个效果，可以让我们这个行呢？哎隔行变色是吧，我们就做一些简单效果，因为这东西本身也比较简单啊叭较简单，然后再看一个啊再看一个，那现在我想干嘛呢？诶我们来看一下这个选择器啊，我能这么写，哎，我能这么写哎那好了，我问你我这么写对不对，Ta table下载TR这么写行不行？哎这么写也没问题，等于我在TR前面我又加了一个限定，我要选中什么，我要选中table里的后代元素TR对吧？因为现在来看TR是不是table的子元素啊，诶所以我用后代选素选择器也能选中它，诶但是我换一种方式，我写一个大于号，我换成什么呢？我换成一个子元素选择器，子元素选择器这时候你发现能不能选中TR了，选不中了，诶为什么呀，我这TR是不是table子元素是。

我这是不是子阳素感应器是，但是为什么没选中TR，诶注意了，这个是我们要说的一个问题，实际上啊，我现在跟你说结论，你要把这换成t Bo。

就可以选中，但是如果写table就选不中，哎，那你可能会纳闷了，诶老师你这压根也没写teabody啊，是不是没写，确实没写，但是为什么这可以写tbo底，哎，那这里边注意了，哎，如果我们这个表格中没有什么呢，使用我们这个tbo底，而是什么呢？而是直接使用TR，那这些注意，那么所有的TR，那么我们这个浏览器会自动创建一个TR，并且什么呢？并诶不是TR创建一个t body，并且将我们这个TR全都放到我们这个t body中，所以你要注意的一点就是TR它不是table的子元素啊，TR不是table的子元素，Table子元素是谁？什么t hi呀，T负的呀，Tbo是这些东西，而不是TR。

所以这块注意，我们无法通过什么呢？我们无法通过这个子元素选算器去选中TR，就说如果你这写的是table，是选不中的，你得写TY，因为table是TR的什么呀，是祖先，不是负元素，诶同学说老师你这空口无凭啊，这已经证实了，对吧？如果你还不信，来我们来看一下什么呢？看一下我们内存里的结构，直接找到body，点开body body里边是不是table啊，Table点开我们来看这有什么。Tbo，但是是不是我写的，不是我写的，哎，是浏览器自己加的，所以注意啊，Tbo这东西比较特殊，就是你不写的时候，它会自动给你给你加上啊，可以说应该是语法规范，按道理来讲我是应该写tbo对吧，应该写tbo，但是一般情况下我们省事就就就不写了，你要怕乱，那你以后写完table就写boy啊，写完table写t tboy，那如果你没写，那你要知道你不写，浏览器它也会自己给你，给你写好，那这个是我们说的这个特点，呃，然后的话，其实主要的样式就是这些了，然后还有一件事儿的话，就是TD的事儿，那我们现在呀，我们把TD的高度给它调高一点，TD呢，比如说我调成这个100个像素，我们调高一点，那实际上这里边注意你看在我们TD中，我们这个内容默认情况下是什么，是垂直居中的啊垂直居中的，所以这里边你需要注意默认情况下我们这个元素，哎，在在我们这个T。

D中它是什么呢？是这个垂直居中的啊，是垂直居中的，我们可以什么呢？我们可以通过这个vertical line来设置啊，我们可以通过这个属性来设置。可以通过什么呢？哎，Verical online，哎来什么呀，来修改，来修改，呃，这个TD是比较特殊的，呃，其他的所有元素verical online里边它只会影响什么呢？只会影响这个文字内容，而我们的这个TD它什么都能影响，只要是里边的子元素它就能影响，所以你现在看啊，我们还是拿文字做演示，我alive来一个top字是就往上走了，哎，我alive来一个bottom字是不是就往下走了，哎同样我们还有那个叫做text，我们来一个这个center，那这个时候它是是就就居中了，哎你说TD里边的元素，它会受到这个vertiical online，还有它的这个tline的一个影响，并且它的这个middle，它这个middle啊TD这个middle那就是什么呀，就是真咪了啊，就是真咪了，是这么一个效果，那这里边其实利用它的话，我们也可以做一些东西啊，比如说我们有这么一个，我们有这么一个啊，我们。

走一个这个div点一个BOX1 div点1BOX1，然后呢，BOX1里边还有一个BOX2，这里面我们给他设置一下样式啊，我们直接来一个点一个BOX1 box1呢来一个300，来一个300，来一个300BACKGROUND background color，我们给他来一个orange orange，然后在这呢，我们再来一个点一个BOX2，二呢是100，然后是100，然后background，我来一个一个黄色的，那现在我希望做到一个什么效果呢？我希望让BOX2在box的正中间，正中间对吧？正中间也就说直接就在这个位置啊，在这个位置，当然实现的方式有很多种，我们可以用什么呀？用定位或者我们可以自己量一下设置位边距都可以，但是这里边现在我们有了这个TD了，我们可以怎么办呢？我们可以直接修改我们BOX1，我可以直接来一个p play，把BOX1变成我们叫做一个tale。

Table cell table table，那这个时候是什么意思，这句话的意思就是将我们元素，将我们这个元素设置为我们这个单元格，那现在注意了，现在BOX1就已经变成了一个什么呢？变成了一个单元格，也就是说在我们TD里边能用的东西，在它里边干嘛呢都能用，所以比如说你想它水平居中，我们来看一下，我们直接来一个text line，我们来一个这个center，但是这个时候你会发现它会有一个特点，如果我是往BOX1里边写文字的，这个水平居中是好使的，看到了吗？但是如果是个元素水平居中是不是不好使啊？哎，所以如果你需要水平居中的话，那没得说，我们还是要做这个MARGIN0凹two，让它做一个水平居中，但是我们这里边。

啊，我应该是给谁呀，我应该是给BOX2设置MAR0AUTO，是不是它水平居中啊？哎，什么居中？但是现在我们来说神奇的地方在哪？神奇的地方在于它可以用vertical online，也就是说如果你想垂直居中怎么办？直接verticallan来一个什么呢？来一个middle，那这个时候元素就直接在负元素里边垂直居中了，懂这意思吗？哎，水平居中没什么难的，就是说还是用我们那个margin，但是当你把它设置为我们那个叫什么呀？叫table cell以后，它就可以设置这个垂直居动了，但是如果你不是table cell，像这种我给注了，那对不起，就没用了，我意思啊，哎，它会有这么一个特点，也就是说我们又多一种方式，之前我们说的是定位，对吧，我们可以通过这种定位啊左诶TOP0 left0，这个BOTTOM0，然后这个RIGHT0都设置成零，然后Mar设置auto可以居中，那现在我们这个是可以干嘛呢？可以设成一个table s，然后你给它来一个这个哎middle就可以了，但是呢，它。

也会有个小问题，因为TD它是个行内元素，所以你改成TD以后吧，它的内容的话，有的时候它就显示不过去啊，它显不过去，但是现在这块我们来看一下，它这应该还有个面具站着呢。TD div是在这个位置，Div在这个位置，现在我把它作为一个table去显示，然后呢，在div后边写点字，诶那等于这一块其实也还没什么问题，它虽然变成了一个，就是这个TD它会比较特殊，它虽然不独占一行，但是它其实它它其实不是块元素，但实际上它也不会独占页面的一个一行，所以你把它当成一个块元素去用就行了，因为你看当你选中它的时候，这个外边距在这儿是不是都都都看不着啊，哎，但是还好，别的元素呢上不去，它应该是只能什么呢，我看一下啊，CTRLCCRV。

哎，你看他只能和自己在一行，哎，如果你看两个BOX1，两个BOX1是不是都是table啊，哎，他只能跟自己在一行，而跟别的他在不了一行啊，也也还好啊，也还好，但是这种方式我们在用的时候呢，用的不多啊，用的不多了解一下你知道有这么一个手段就可以啊，知道这么一个手段就可以好，那这个是我们关于表格的一些样式，不多说了啊，主要理解一下，后边我们用到的时候，我们还会写，然后还要注意一点，表格在之前的很长一段时间经常用来对网页的布局，但是现在用表格布局的事儿已经不多了啊，已经不是不多了，就基本上绝种了，没有人再用表格布局了，所以啊，以后我们说了，如果你会，如果你不会，不会就不会了，不用管它了，如果你会用表格布局，或者曾经使用过表格布局，那么OK，以后不要用了，什么时候用表格？只有在当你需要显示一些格式化数据的时候才用表格，比如说你要显示日历。

比如说你要显示课程表，比如说你要显示一个人名单，这个时候你可以用表格，其他的以外的情况布局绝对不要用表格啊，绝对不要用表格，好，关于表格样式，我们就先说这么多。