HTML表格

HTML表格

table:表格区域

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

在开发工具HbuilderX中可以用table>tr* 行数 >td * 列数 可快速生成一个表格。

在每个标签内赋予属性，可达到一定的效果；

1.table:表格区域

border边框

width 宽

height 高

bgcolor 背景颜色

background 背景

cellpadding: 内容到边框的距离,
cellspacing: 单元格与单元格之间的距离,一般设置为"0";

align="center": 控制表格在本行中的水平位置。

caption 加入表格的标题。

cols 是 列数

rows 是 行数

2. tr:表格行

height 高

bgcolor 背景颜色

background 背景

align="center" 让本行所有单元格内容居中

valign 设置内容的垂直位置 。 有三个值 top （紧贴边框上部）； middle（居中）； bottom（紧贴边框底部）。

3.td单元格

width 宽

bgcolor背景颜色

background 背景

align="center"

valign 设置内容的垂直位置 top middle bottom

th:表头,也是单元格,内容加粗居中显示

colspan: 跨列

rowspan:跨行

练习
完成图片所给效果：

代码：

	
		
		
	
	
		

			
财务报表
			

				
品  牌
				
				
春  装
				
				
				
夏  装
				
				
			
			

				

				
				
男  装
				
女  装
				
童  装
				
男  装
				
女  装
				
童  装
			
			

				
JC
				
牛仔系列
				
110
				
50
				
228
				
586
				
255
				
98
			
			

				
				
休闲系列
				
120
				
500
				
400
				
198
				
88
				
50
			
		
	

效果：