HTML-表格布局

1.0 table标签

1.1table标签是表格布局标签,可以通过表格之间的嵌套合并来实现多所需要的表格。

,且合并之后的表格无需填充直接完成后续表格即可;

2.在嵌套以及与form表单结合时,注意双标签的位置,需要多加练习以达到熟练掌握。

你可能感兴趣的:(个人总结,前端,html,tablet)

表格标签行标签定义表头 元素用于对 HTML 表格中的主体内容进行分组
表头标
列标签
< tfoot> 元素用于对 HTML 表格中的表注(页脚)

通过如图方式实现 




	
	表格布局


序号 姓名 性别 信仰
1 张三
2 王四 伊斯兰
3 赵一 耶稣教

HTML-表格布局_第1张图片

1.2table常用属性

border---用于设置表格边框的大小,用正整数设定,正整数越大表格边框越大。
height\width---用于设置表格的长宽,此设定只能改变
,单位是px和%。如果行和列都设置了不同的高宽则取最大值。
align---用于设置表格的对齐方式,对齐方式一共有三种,分别是:left左对齐(默认),right右对齐,center中间对齐。
bgcolor---用于设定表格的背景颜色,具体颜色可参照颜色表。
background---用于设定表格的背景图案,当同时设定了背景颜色和背景图案时,显示背景图案。
cellpadding---用于设定表格的单元格和边距之间的距离。
cellspacing---用于设定表格的单元格和单元格之间的距离。

2.0表格的合并和嵌套

合并:

表格的合并有两个属性分别是:colspan---即合并列向单元格。rowspan---即合并横向单元格。

嵌套:表格的单元格里面也可以包含其他的HTML元素,只要它们全部包含于单元格内即可。当一个表格的单元格内是另一个表格时,就创建了一个“嵌套表格”,同理也可以通过与form表单结合来实现更加整洁美观的效果。




	
	表格嵌套和合并


	
顺丰快递
地址:光彩小道863h号 寄件人: 王麻子 tel:155xxxxxxxx
收件人: 王小麻子 tel:144xxxxxxxx

HTML-表格布局_第2张图片


3.0小笔记

1.注意无论横向纵向合并时,属性均在

中放入,即