表格table作用:用来显示数据
table > tr >th / td
tr:表格的每一行
th :表格的列标题
td: 单元格
表格标签补充: 表格分组
1、表格行分组标签:
表头:表格的头部
表体:表格的主题
表尾:表格的尾部
作用:可以给表格的每一行进行分组;
注意: 一个table里 只能有一组thead、和一组tfoot标签,但可以有多个tbody;
2、表格列分组:
说明:从左像右依次进行列分组的
3、caption:表格标题标签
caption-side :top/bottom/right/left 设置表格标题的显示位置的
默认是都是以top方向显示的,只有火狐浏览器是全部支持的,IE6只支持top,其他浏览器支持top和bottom
表格属性补充:
1、单元格间距:border-spacing:value;
说明:单元格间距(该属性必须给table添加) 表示单元格边框之间的距离, 不可取负值'
2、合并相邻单元格边框:border-collapse:separate/collapse;
说明:合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值; collapse(边框合并)
3、无内容时单元格的设置:empty-cells:show/hide;
说明:定义当单元格无内容时,是否显示该单元格的边框区域;show:显示 ;hide:隐藏;
4、显示单元格行和列的算法(加快运行的速度): table-layout:auto/fixed;**
默认时是:auto;自由显示 根据内容的多少显示宽高
fixed : 固定显示 固定大小,平分表格的宽度;
auto:优点: 让单元格显得是更加灵活;
缺点:他会增加浏览器的运行负担;
fixed:优点:快速分配单元格大小;
缺点:不够灵活;
表格的HTML属性:
border
rowspan 合并行
colspan 合并列
rules : 添加表格分割线的属性,以下为对应值的意义
rows 行分割线
cols 列分割线
all 行和列分割线
none 没有分割线
groups 组分割线
Like
Like
Love
Haha
Wow
Sad
Angry