【课程笔记】前端核心技术--HTML排版

一、HTML表格

1. HTML表格标签

标签 描述
定义表格
定义表格的行
定义表格的表头
定义表格单元
定义表格标题
定义表格的头部区域
定义表格的中间主体部分
定义表格的底部区域

表格结构如下:

【课程笔记】前端核心技术--HTML排版_第1张图片

 2. table表格属性

属性 描述
align left,center,right。相对周围元素的对其方式
bgcolor 规定表格的背景颜色
border 规定表格是否拥有边框,以及边框宽度
cellpadding 内边距(单元格与文字之间)
cellspacing 外边距(单元格与单元格之间)
width 表格宽度
height 表格高度

demo1 




    
    
    
    Document


    
表格标题
1行1列 1行2列 1行3列
2行1列 2行2列 2行3列
3行1列 3行2列 3行3列
4行1列 4行2列 4行3列

运行结果:

【课程笔记】前端核心技术--HTML排版_第2张图片

 3. th、td单元格属性

属性 描述
align

left,right,center,justify,char。

规定单元格内容的水平对齐方式

bgcolor 背景颜色
colspan 单元格可横跨的列数
rowspan 单元格可纵跨的行数
height

单位:px  or   %

高度

width

单位:px  or   %

宽度

valign

top,middle   

单元格内容的垂直排列方式

demo2 计算器




	
		
		计算器
	
        
		
计算器
C % / *
7 8 9 +
4 5 6 -
1 2 3 =
C 0 .

运行结果:

【课程笔记】前端核心技术--HTML排版_第3张图片

 demo3 课程表




	
		
		课程表
	

	

		
课程表
星期一 星期二 星期三 星期四 星期五 星期六 星期日
上午 HTML HTML HTML HTML HTML 自习 自习
CSS CSS CSS CSS CSS
JavaScript JavaScript JavaScript JavaScript JavaScript 自习 自习
下午 PHP PHP PHP PHP PHP
JAVA JAVA JAVA JAVA JAVA 自习 自习
UI UI UI UI UI
Android Android Android Android Android 自习

运行结果:

【课程笔记】前端核心技术--HTML排版_第4张图片

demo 4 导航




	
		
		导航栏
	

	
		

运行结果:

 

你可能感兴趣的:(html和css,笔记)


电脑版本
Index HTML CSS JavaScript JAVA PHP More