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"时