- table
![834d4d932132eeac3e2ea08ae7ecb970.png](https://img-blog.csdnimg.cn/img_convert/834d4d932132eeac3e2ea08ae7ecb970.png)
HTML的 table
元素表示表格数据 — 即通过二维数据表表示的信息。
table里面包括三个子元素--thead,tbody,tfoot,表头,内容和尾部。
thead,tbody,tfoot里面有tr,代表table row,表的一行。
tr里面有th和td,th代表这一行的行头,和里面的内容td,td就是table data。
![395598a9154b49b4d6d4a01c79b12d59.png](https://img-blog.csdnimg.cn/img_convert/395598a9154b49b4d6d4a01c79b12d59.png)
table标签的里面的<colgroup>一般和<col>一起使用。
HTML 中的 表格列组(Column Group<colgroup>) 标签用来定义表中的一组列表。
<colgroup>developer.mozilla.org![834d4d932132eeac3e2ea08ae7ecb970.png](https://img-blog.csdnimg.cn/img_convert/834d4d932132eeac3e2ea08ae7ecb970.png)
HTML <col>
元素 定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>
元素内。
![834d4d932132eeac3e2ea08ae7ecb970.png](https://img-blog.csdnimg.cn/img_convert/834d4d932132eeac3e2ea08ae7ecb970.png)
width
自HTML5以来已过时此属性指定当前列组中每列的默认宽度。除了标准像素和百分比值之外,此属性可能采用特殊形式0*
,这意味着组中每列的宽度应该是保存列内容所需的最小宽度。0.5*
也可以使用相对宽度。
![834d4d932132eeac3e2ea08ae7ecb970.png](https://img-blog.csdnimg.cn/img_convert/834d4d932132eeac3e2ea08ae7ecb970.png)
![907f82a75509d2ac6f5caa6b4380f3ae.png](https://img-blog.csdnimg.cn/img_convert/907f82a75509d2ac6f5caa6b4380f3ae.png)
最开始还有bgcolor,但是现在很少用,现在一般都用CSS改变样式。所以不推荐用,标准上也已经废除了。
![4f93dff2a218dc9711c6d449337b1fd0.png](https://img-blog.csdnimg.cn/img_convert/4f93dff2a218dc9711c6d449337b1fd0.png)
thead、tbody、tfoot的代码顺利并不影响浏览中展示的效果。
![e5614b9f5da86c14c7f9e92a079cc51a.png](https://img-blog.csdnimg.cn/img_convert/e5614b9f5da86c14c7f9e92a079cc51a.png)
如果把tfoot、tbody、thead删除,浏览器会自动把这三个内容加载tbody里面,这个时候thead就会按照顺序来展示,比如删除掉tfoot。
![8805c0e1919c7bffcb9d30756243c271.png](https://img-blog.csdnimg.cn/img_convert/8805c0e1919c7bffcb9d30756243c271.png)
如果不想表格中存在间隙,可以使用CSS来合并间隙达到效果,比如使用 border-collapse: collapse;
![2022b4c440e7f611f34ad42e2ce2e339.png](https://img-blog.csdnimg.cn/img_convert/2022b4c440e7f611f34ad42e2ce2e339.png)
本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源