关于html+css表格的总结

表格最基本的元素table、tr、td，tr代表有几行，td代表每一行有几个单元格，写上下面一段代码：

这是写了一个两行两列的表格，表格默认是没有边框的，自己可以通过border给表格还有单元格设置边框。可以看出：

给table加边框加的是最外边的一个框，如果想给每一个单元格加上边框，就要给td设置边框。

这时不难发现边框之间有空隙，我们有两种解决办法：

第一种是加上cellspacing=“0”，但是需要注意cellspacing不是css属性，因此不能写在style里面去，而且不能写成cellspacing：0，要写成cellspacing=“0”

实验时，我将第二行的一个单元格注释掉，之后再效果图中我们就能看到，在用cellspacing=“0”时，本来1px的红色边框进行合并，变成2px，在没有单元格的地方，会出现有些边框线粗有些边框线浅的情况。那么我们可以采用第二种方法：

第二种方法：添加border-collapse:collapse属性即可，这个属于是写在style中的。

在做表格的过程中第二个遇到的问题就是：如果想让某个单元格拥有3个单元格宽度或3个单元格高度该怎么办？我们可以使用colspan=“3”（拥有3列的宽度）、rowspan=“3”（拥有3行的高度）

添加了colspan=“3”这样的属性，第二行的第二个单元格就占了3个单元格宽度。

添加了rowspan=“3”让第一列第一行占了3行的高度。

在制作表格的过程中我们会发现，表格的宽度和高度会自己根据宽度进行调节，如果整个表格宽度是300px，其中一个宽度是100px，另一个是200px，那么下面的一行表格宽度会自动继承上一行表格的宽度。

如果说单元格的td宽度设置超出或不足table表格的宽度，那么会自动根据每个单元格的宽度按比例进行自动设置。如：table宽度300px，当每个单元格宽度200px，有两个这样的单元格时，会按比例给每个单元格150px的宽度。

通过这个例子我们也可以看出，如果我们做一个上下两个单元格宽度不同的表格，就没法做了，需要用嵌套表格的方式来做表格。

如图：

如果想做上下宽高不一样的表格，可以用另一个表格来做，但是在两个表格重合的地方，表格线会变粗，怎么解决这个问题呢？可以给第二个表格的border-top：hidden即可。