HTML表格总结

  前几次我们对HTML的基本进行了总结，今天就让我们进行HTML表格的总结。

表格使用的是table标签，其中最重要的就是需要知道thead---表头；tr---行，td---列

因此输出结果为

 但这样的表格缺少边框，因此我们需要牢记边框属性border，并且要知道border后面的取值是>=0，默认值为零。因此让我们在刚才的基础上加上边框。

 并且在border后取不同的值，结果为

可以看出，边框线的粗细的确是根据border后值的大小来决定的。

  接着我们需要知道如何控制表格的宽和高。

  首先表格的宽和高依旧还是我们熟悉的width和height，但是它们的单位发生了改变，它们的单位为px（像素），比如我们要对刚才的表格的宽和高进行改变

然后不同结果的表格为 

   多数情况下，我们需要将表格对齐方式进行调节，而这又需要我们熟悉的align标签，而align标签中一般使用left，right，center这三个，而默认的为left。

可以看出，此时表格在网页中的位置根据align属性取值不同分布不同，并不是默认靠左。

  当然完全空白的表格是绝大多数人都不喜欢的，于是我们很多时候需要给表格添加背景颜色或者背景图，所以我们又要用到bgcolor---背景颜色和background---背景图片

表格的间距与边距则需要用到cellspacing和cellpading，而它们的单位同样也是像素px，而使用它们的原理也和border一样，我们就以同一表格三种情况为例 

从上面图片可以看出间距与行距的添加对表格的重要性。

（补充：1.如果table和tr同时设置不同的高度，tr的优先级更高。2.如果tr和td同时设置了不同的高度，哪个值更大取哪个。）

  很多时候一个表格往往不能展示我们所需要的事物，这个时候我们还需要在表格当中进行嵌套 

   像我们浏览各大视频网站时，首页推荐其实就是一个个表格的合并，因此要想要表格合并则需要知道rowspan-------列（垂直方向跨行） colspan--------行（水平方向跨行）

 

由此我们可看出现在多个表格合并在一起了。

现在我们结合之前的代码做一个视频首页 

 

结合HTML代码可以干很多事 加油吧！