HTML学习之路-03HTML表格、table布局

目录

一、HTML表格

a.基本知识

1.table标签

2.tr标签

3.td和th标签

 b.练习

1.代码

2.运行

3.分析

4.感悟

c.案例

1. 效果：

2.分析

---

,以此类推。

注意：以上tr正确写法应该

一、HTML表格

a.基本知识

1.table标签

声明一个表格（关于表格的代码全部放在这个标签里面），它的常用属性如下：

• border属性 定义表格的边框，设置值是数值
• cellpadding属性 定义单元格内容与边框的距离，设置值是数值（内间距）
• cellspacing属性 定义单元格与单元格之间的距离，设置值是数值（外间距）
• align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right默认左对齐
• height设置高度
• width设置宽度

 以上代码只是用table定义了一个表格，其中边框为1像素，宽高，水平居中。

 

2.tr标签

定义表格中的一行

3.td和th标签

定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

colspan 设置单元格水平合并，设置值是数值

rowspan 设置单元格垂直合并，设置值是数值

 

	
		
		
	
	
		
表格
		

		
			

				
1
				
2
				
3
			
			

				
				
1
				
2
				
3
			
			

				
1
				
2
				
3
			
		
	

 b.练习

1.代码

	
		
		
	
	
		

			

				
基本情况
			
			

				

				

				

				

				

			
			

				

				

				

				

			
			

				

				

				

				


			
			

				

				

				

				


			
			

				

				

				

				


			
		
	

2.运行

3.分析

从运行结果来看表格一共有6行每行有5列

所以大致的思路是6个tr标签每一个tr包5个td

而本代码思路是在第一行的时候定义5列其余代码可以只定义4列

4.感悟

当我们在第一行定义了格子3列时，后面只要定义一行就自动是三列，无需进行再定义

c.案例

	
		
		
	
	
		

			
			
			
			

				

					

						

							

						
						

							

						
						

							
 张达山
						
						

							
13326489976
						
						

							
[email protected]
						
					
				
				

				

					
					

					

					

					

						

							
个人基本情况
						
						

							
姓 名：张达山
							
籍 贯：北京昌平
						
						

							
性 别：男 
							
身 高：175cm
						
						

							
民 族：汉
							
体 重：70kg
						
						

							
出生日期：1992.03.28
							
电 话：18210898888
						
						

							
现居住地：昌平天通苑
							
专 业：工业设计
						
					
					

					

					

						

							
教育背景及工作经历
						
						

							
2008.09-2011.06北京邮电大学 工业设计专业
						
						

							
2011.06-2012.09北京微创信息科技有限公司 任前端开发工程师
						
					
					
					
					

					

					

						

							
所获证书
						
						

							
2009年：荣获“高级美术设计师”证书
						
						

							
2009年：荣获“优秀班干部”证书
						
					
				
				

			
		
	



 		
 
 

1. 效果：

2.分析

图1

 从图1可知代码并没有给这一行的每一个设置高度，其默认高度是文字或图片自然撑开的。

br标签实现换行

hr标签实现水平线的绘制

二、总结

学习了table表格其中

1.

2.

3.tr定义一行 td定义一列 th定义主列 标签加粗