01-html&CSS/16-尚硅谷-HTML和CSS-table标签

现在呢，我们来看一下这个表格，哎，表格在HT当中怎么做，大家看一下，下面有个图啊，这个图呢，是我在阿里巴巴这个网站上截下来，你看这样一个地方，这样一个效果，它就是表格，那这个效果我们用HTML怎么样去实现呢？来看一下。啊，我们找到HTM没有，这里面表格呢。还有六是吧，来咱们需求是啥呀？来把这个需求拿过来啊，我复制，然后放到这里面来把它们都包起来，全选，然后CTRL加设置一下斜杠啊好简单说第一个需求就做一个带表头的三行三列的表格，并且显示边框，来吧，咱们整一个表格用什么标签来表示啊，其实很直观，Table嘛，Table就是标签嘛，对吧？啊就表格嘛，好那么表格是分行和列的行用什么表示呢？T啊啊，那单元格呢，大家注意看啊，表格这个东西我们看到这里，它这整体上是一个表格吧，然后它分行。

我们说又分裂，但是大家注意。在HTML当中。整体上看是列，但是这一个小的一个东西里面一个格子，它用一个标签叫做TD，我们管这一个格叫做单元格，单元格用什么表示叫做TD啊？咱们说1.1就是一行一列是吧，一行二列。三是吧，那我们复制一下，咱们三行三列复制。复制是吧，CTRL设加二斜杠L能，哎，还行吧。还行，格式化了，OK，那咱们这个是啊啊啊。2333是吧。好，这不就三杠三练了吗？来，我运行一下。

大家看这个三个行列是不是出来了。但是有同学老师，那这哪是表格没看出来，对，没看不上表格呢，是因为咱们没有给它加边框，加上边框就可以了，怎么加呢？注意看啊，在table上面空格敲的看见了吗？刚刚我们给。图片加边框是不是也是model属性啊，这里呢也一样，写个一就行了，好好，那么你在这边刷新一下这表格是不是出来了，它还是很丑啊，而且还很小啊，我们稍微改一改，给他美化一下，首先改改下这个宽高。宽高怎么改，跟原来一样，这这是不是宽度那个属性啊，呃，咱们改300就300个像素的高度啊不，这个是宽度是吧，高度高诶。怎么显示不知了了，来我试试看哈，呃，300还能用不？走是不是可以啊，嗯。

那么这个就是改宽高了，然后呢再来看。注意人家说三行三列代表可显示边框，咱们乍一看好像完成了是吧，那有啥问题呢？一般情况下别着急，咱们第一行它是有这个特殊的一个要求的，因为第一行。大家是不是会对这一列的数据进行说明对吧？咱们数据库是不是也是那个效果啊，那么一般情况下这个说明它会怎么显示呢？是居中B的加粗的显示，那居中B的加粗是怎么做呀？你要加粗的话，B标签是加粗。你把内容拿进来。好，然后你刷新这是不是加粗了，那咋居中法呢？对还是这个center看见吗。啊，那咱刷新一下走你这个居中啊，那么也就是说你需要对每一个单元格都加这两个效果才行，但是其实在开发当中啊，人家觉得这个表头第一行这个效果是非常常见的，他觉得你这样写太麻烦了怎么办？他给你写好一个现成的标签，而这个标签的效果呢，就跟我们刚刚手动设置的效果完全一致，什么标签TH。

好，我现在改了一个TH，看见吧，刷新一下诶，是不是跟前面效果一样啊啊，那很明显这个斜起来要比前面简单很多呀，OK，那我们稍微来诶。稍微来说明一下。好，Table标签是表格标签，TR是行标签，然后TH是表头。标签，然后TD是单元格标签对吧，然后它的属性都是table的展示，咱们展示看到的是这样多的设置。

表格边框啊，那么with设置表格宽度，He设置表格高度，就这样子。啊，就这样子，那么你的这个TD还可以加这个。设置表格或者是单元，应该是单元格，设置单元格文本对齐。方式就这样子好OK，那么我们结束了我们的这个需求吗？还没有，咱们需求里面只是说做代表头的三行三列显示边框，现在称其量就是把第一个做完了是吧？啊，还要改一个，你这是不是应该也应该改成TH啊？

那上面是不是应该取消这所有的标签贴就完事了，B标签也去掉是吧，咱们刚刚用的B标签，按照这里说一下吧，B标签。是加粗标签啊加粗标签好，那来吧，这第一个需求算是完成了，第二个需求还要啥，就是呃，来看看哈，他说有表格宽度高度咱们有了是吧。表格的对齐方式，对齐方式是啥意思，所以看咱们整个表格默认情况下，它是不是在页面的左边是吧，你怎么改一个对齐呢？你在这个表格上面还是用这个来借出对齐，左中右可以吗？啊中间呢居中。右边呢，哎，就U齐位看懂吧，OK，然后我们说这个呢，如果是加在table标签上，它也是设置对齐，但它设置的是表格的对齐。

设置表格相对于页面的对齐方式就这样子好，但是一般情况下咱们这个表格可能居中用的比较多，但如果是居中的话，我们其实是不推荐写这个center的啊，你看这这有个center对吧，我们可能推荐写什么东西呢？啊。我看看这个写上center，好，这个在H5里面不推荐使用了，是吧？啊，那你就写上A吧，那你就写a land好吧，H5已经不推荐使用了，就用这个，这个能用就用它，OK，好还有什么东西呢？就是单元格间距，什么叫单元格间距了？我们说单元格是不？这这是一个格子，这是一个格，这是单元格吧，间距就是单元格跟单元格之间的一个距离，老所有吗？没看出来啊，我现在给你截个图，然后把这个图放大。

看见格子跟格子之间是不是有个很小的间隙啊，这个是单元格间距，我们怎么样去调整呢？它有属性。找sheskating了。哎，哪个能空格需要skating啊，那么注意看啊，比如说我给了个十，那这个间距就是十个像素的一个间距更大了，看见吧，但一般情况下呢，我们很少会这么做啊，我们可能会把它的这个间距变得更小，一般就是设置为没有间距改成零。看见吗？零是什么效果，零是稍微注意看啊，这是个表格，哎，里面呢，是那个单元格零走。来，我给你演示一下啥是零。好，现在我把这个稍微放大一下，大家看一下零就是上面这种情况，不是左边零是什么？是两条线之间没有距离，是不是挨在一起，所以它的整个边框的宽度其实是两个像素看懂了，所以看的很宽。

那么如果是左边这个效果呢，叫做完全重叠，这个效果我们的甲CSSSO甲啊就知道一下，好，我把它恢复一下OK啊，那么零是设置它的间距为零。设置单元格。间距，OK。