网页设计（六）表格与表格页面布局_网页设计表格布局

作者：Cpp五条 | 2024-06-16 02:05:14

踩

网页设计表格布局

在这里插入图片描述

一、设计《TF43: 前端的发展与未来》日程表

《TF43: 前端的发展与未来》日程表
在这里插入图片描述
文字素材：
前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。
今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。
在这里插入图片描述

<!-- prj_6_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>TF43: 前端的发展与未来-日程表 </title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			#div0 {
				width: 720px;
				height: 626px;
				margin: 0 auto;
				position: relative;
			}

			p {
				text-indent: 2em;
			}

			#div2 {
				width: 200px;
				height: 40px;
				background-color: #0000CC;
				color: white;
				position: absolute;
				top: 180px;
				left: -35px;
			}

			h3 {
				font-size: 20px;
				color: white;
				padding: 10px 20px;
				font-family: 微软雅黑;
			}

			table {
				font-size: 12px;
				width: 720px;
				height: 420px;
			}

			.row1 {
				background: #E1E1E1;
				text-align: center;
			}

			#row2 {
				background: #E3E3E3;
			}

			#td1 {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div0" class="">
			<div id="div1">
				<h2 align="center">TF43: 前端的发展与未来论坛</h2>
				<p>前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。</p>
				<p>今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、IoT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。</p>
			</div>
			<div id="div2" class="">
				<h3>CCF TF 技术前线</h3>
			</div>
			<table align="center" border="1" cellspacing="0px">
				<tr class="row1" height="82px">
					<td colspan="3">
						<div>
							<p> 只为技术专家 </p>
							<p> CCF TF第43期 </p>
							<p> 主题　前端的发展与未来 </p>
							<p> 2021年7月31日 9:00-17:30 </p>
							<p> 中科院计算所 四层报告厅（北京海淀区科学院南路6号） </p>
						</div>
					</td>
				</tr>
				<tr id="row2 " height="35px">
					<th>会议时间</th>
					<th>演讲人</th>
					<th>会议名称</th>
				</tr>
				<tr>
					<td id="td1">09:00-09:10</td>
					<td>张高 CCF TF前端SIG主席</td>
					<td>开场致辞</td>
				</tr>
				<tr>
					<td id="td1">09:10-10:05</td>
					<td>姜凡 淘系技术部前端团队负责人,阿里巴巴经济体前端技术委员会主席</td>
					<td>《淘系前端价值体系的思考》</td>
				</tr>
				<tr>
					<td id="td1">10:05-11:00</td>
					<td>月影 字节跳动技术中台前端团队负责人,ByteTech和掘金社区负责人</td>
					<td>《技术社区与职业成长》</td>
				</tr>
				<tr class="row1">
					<td id="td1">11:05-11:10</td>
					<td colspan="2">Break</td>
				</tr>
				<tr>
					<td id="td1">11:10-12:05</td>
					<td>贺师俊（hax） 开放原子开源基金会TOC成员,Ecma-TC39特邀专家</td>
					<td>《我们如何参与JS语言标准的制定》</td>
				</tr>
				<tr class="row1">
					<td id="td1">12:05-13:30</td>
					<td colspan="2">午餐</td>
				</tr>
				<tr>
					<td id="td1">13:30-14:25</td>
					<td>赵锦江 Shopee新加坡前端委员会负责人</td>
					<td>《从海外视角看前端团队的组织与发展》</td>
				</tr>
				<tr>
					<td id="td1">14:25-15:20</td>
					<td>杨永林 贝壳如视技术中心负责人,如视工程部负责人</td>
					<td>《前端三维技术的应用前景》</td>
				</tr>
				<tr class="row1">
					<td id="td1">15:20-15:30</td>
					<td colspan="2">Break</td>
				</tr>
				<tr>
					<td id="td1">15:30-16:25</td>
					<td>周鹏 软件与体验部 高级前端工程师/小米集团技术委前端技术委员会 委员</td>
					<td>《前端在“手机xAIoT”领域的探索》</td>
				</tr>
				<tr class="row1">
					<td id="td1">16:30-17:30</td>
					<td colspan="2">圆桌论坛</td>
				</tr>
			</table>
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

二、简易电子政务网

在这里插入图片描述
文字素材：

全省教育电子政务工作座谈会在宁召开

为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。

国务院：运用大数据提高政府服务水平

近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。
《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。

简易电子政务中心 ©版权所有
地址：太空市南京南路280号联系电话：99-99999999
苏ICP备：20220116002

简易电子政务网初始首页（未应用样式）
在这里插入图片描述

<!-- prj_6_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>简易电子政务网 </title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			table {
				margin: 0 auto;
			}

			#header {
				background: url(pro62/logo.jpg) no-repeat center center;
			}

			h4 {
				color: red;
				padding: 10px auto;
				height: 30px;
			}

			td {
				color: black;
				font-size: 20px;
			}

			tr {
				text-align: center;
			}

			p {
				text-indent: 2em;
				font-size: 18px;
				text-align: left;
			}

			#nav {
				text-align: center;
				width: 100%;
				height: 54px;
			}

			a {
				display: inline-block;
			}

			a:link,
			a:visited,
			a:active {
				text-decoration: none;
				color: white;
				background: #666699;
			}

			#nav td a:hover {
				color: white;
				background: #9999ff;
				font-weight: blod;
				transform: rotate(360deg);
				/* 旋转360度 */
				transition: all 0.3s;
				/* 在所有属性上过度0.3s */
			}

			td table tr td a:hover {
				border-bottom: 5px solid white;
			}

			#left,
			#right {
				margin: 15px 10px;
			}
		</style>
	</head>
	<body>
		<table border="0" width="1002px" cellspacing="0px" cellpadding="0px">
			<tr>
				<td colspan="3" height="219px" id="header"></td>
			</tr>
			<tr height="50px">
				<td colspan=3>
					<table border="0" width="100%" width="100%" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
						<tr id=nav>
							<td><a href="#">新闻资讯</a></td>
							<td><a href="#">领导讲话</a></td>
							<td><a href="#">行政公文</a></td>
							<td><a href="#">成果展示</a></td>
							<td><a href="http://www.edu.cn">中国教育网</a></td>
							<td><a href="#">教育信息网</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td height="250px">
					<table width="150px" height="100%" border="0" bgcolor="#666699" cellspacing="0px" cellpadding="0px">
						<tr>
							<td><a href="#">新闻资讯</a></td>
						</tr>
						<tr>
							<td><a href="#">行政公文</a></td>
						</tr>
						<tr>
							<td><a href="#">领导讲话</a></td>
						</tr>
						<tr>
							<td><a href="#">成果展示</a></td>
						</tr>
					</table>
				</td>
				<td width="400px">
					<div id="left">
						<h4>全省教育电子政务工作座谈会在宁召开</h4>
						<p>为进一步统一思想、提高认识、振奋精神、明确方向，3月14日，全省教育电子政务工作座谈会在宁召开，来自13个省辖市、3个省管县（市、区）教育门户网站维护保障单位负责人参加了会议，各地就教育电子政务工作开展的情况作了交流，对全省教育门户网站绩效考核指标体系、江苏教育网《视频新闻》栏目筹建和通联站建设管理方案进行深入的研讨。
						</p>　　
					</div>
				</td>
				<td>
					<div id="right">
						<h4>国务院：运用大数据提高政府服务水平</h4>
						<p>近日，国务院办公厅印发《关于运用大数据加强对市场主体服务和监管的若干意见》(以下简称《意见》)。</p>
						<p> 《意见》要求，以社会信用体系建设和政府信息公开、数据开放为抓手，充分运用大数据、云计算等现代信息技术，提高政府服务水平，加强事中事后监管，维护市场正常秩序，促进市场公平竞争，释放市场主体活力，进一步优化发展环境。
						</p>
					</div> 　　
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center" height="35px">
					<hr color="#c0c0c0">
					简易电子政务中心&nbsp;&copy;版权所有<br>
					地址：太空市南京南路280号 联系电话：99-99999999<br>
					苏ICP备：20220116002<br>
				</td>
			</tr>
		</table>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

三、课外拓展训练

1.设计新书推荐页面

(1)页面标题：“新书推荐”。
(2) 书简介内容如下。

数学的世界 I 作者: J.R. 纽曼编，王善平, 李璐译定价: 59.00元推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血，所精选的迄今为止世界上最天才的数学文献集锦。高 …

现代教育技术 作者: 傅钢善定价: 39.80元推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。
《生态智慧——生态可持续性》 作者: 伍业钢定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本）。

中国工程院院士（11） 作者: 中国工程院、高等教育出版社、中国工程物理研究院定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身。
在这里插入图片描述

<!-- project_6_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新书推荐</title>
		<style type="text/css">
			img {
				width: 150px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0px" bordercolor="#f0f0f0">
			<tr>
				<td colspan="4">
					<h4>总编推荐</h4>
				</td>
			</tr>
			<tr>
				<td><img src="kwtz61/image61.jpg"></td>
				<td>
					<h4>数学的世界 I</h4>
					<p>作者: J.R. 纽曼 编， 王善平, 李璐 译 定价: 59.00元 推荐理由: 呈现在大家面前的是由J.R. 纽曼花费十五年心血， 所精选的迄今为止世界上最天才的数学文献集锦。 高 ...</p>
				</td>
				<td><img src="kwtz61/image62.jpg"></td>
				<td>
					<h4>现代教育技术</h4>
					<p> 作者: 傅钢善 定价: 39.80元 推荐理由: 本教材结构新颖，逻辑清晰，图文并茂，内容丰富，易教易学，知行合一。</p>
				</td>
			</tr>
			<tr>
				<td><img src="kwtz61/image63.jpg"></td>
				<td>
					<h4>《生态智慧——生态可持续性》</h4>
					<p> 作者: 伍业钢 定价: 29.00 推荐理由: 传统的经济学认为，经济的投入和产出可以简化为“资本+劳动”的投入等于经济增长，而忽略了对劳动者的人文关怀（以人为本 ...</p>
				</td>
				<td><img src="kwtz61/image64.jpg"></td>
				<td>
					<h4>中国工程院院士（11）</h4>
					<p> 作者: 中国工程院、高等教育出版社、中国工程物理研究院 定价: 500.00 推荐理由: 中国工程院院士是国家在工程技术方面设立的最高学术称号，为终身荣誉。为了展现中国工程院院士的风采、宣传科学家积极投身 ... </p>
				</td>
			</tr>
		</table>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2.采用表格布局设计区域划分页面

在这里插入图片描述

<!-- project_6_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表格布局实训</title>
		<style type="text/css">
			table {
				margin: 0 auto;
			}

			#td1 {
				background: #F1E2D3;
				height: 200px;
			}

			#td2 {
				background: red;
				height: 50px;
				width: 100%;
			}

			#tr3 {
				background: #F1F1F1;
				height: 290px;
			}

			#td4 {
				background: #E1F1F3;
				height: 60px;
			}

			td {
				text-align: center;
				vertical-align: middle;
				font-size: 36px;
			}

			a {
				color: white;
			}

			a:link,
			a:visited,
			a:active {
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<table width="1000px" height="600px" border="5px">
			<tr>
				<td id="td1" colspan="4">logo</td>
			</tr>
			<tr>
				<td id="td2" colspan="4">
					<table width="100%" height="100%">
						<tr>
							<td><a href="#">menu1</a></td>
							<td><a href="#">menu2</a></td>
							<td><a href="#">menu3</a></td>
							<td><a href="#">menu4</a></td>
							<td><a href="#">menu5</a></td>
							<td><a href="#">menu6</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr id="tr3">
				<td>content1</td>
				<td>content2</td>
				<td>content3</td>
				<td>content4</td>
			</tr>
			<tr>
				<td id="td4" colspan="4">footer</td>
			</tr>
		</table>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

作者主页： 正函数的个人主页
文章收录专栏： Web design

欢迎大家点赞

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/724711