table标签介绍
HTML表格由table标签以及一个或多个tr、th或td标签组成:
table标签用来定义表格,整个表格包含在<table>和</table>标签中;
tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示;
td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示,具体的表格内容放置在这一对td标签或th标签之中,其中th标签中的内容默认以粗体、居中的方式显示。
caption:设置表格的标题


border属性:
设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框,实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。
1.没有border时


2.<table border="10%"> 时


3.<table border="100%">时


width属性:设定表格的宽度
1.width="50%"时


2.width="100%"时


align属性:指定表格相对于周围标签的对齐方式

1.align="right"

2.align="center"

cellspacing 标签属性:设定单元格之间的间距(单位:px)
不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置
1.未设置时

2.cellspacing="0"时

3.cellspacing="20"时

cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)
不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现
1.cellpadding="20"时

bgcolor标签属性

不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果
1.bgcolor="red"时


border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框

1.style="border-collapse:collapse;" 时
设置前

设置后


关于th和td的属性
1.设置文字颜色(用style)


2.colspan(所占的列数)
colspan="3"时


3.rowspan(所占的行数)
rowspan="3"时


版权声明1:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44853310/article/details/109898647
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
-
发表于 2021-04-08 00:16
- 阅读 ( 212 )